简单的手写jquery轮播图（包含切换按钮、小圆点）

css代码

* {margin: 0;padding: 0;
}.container {width: 800px;height: 400px;margin: 100px auto;position: relative;overflow: hidden;cursor: pointer;
}
.container img {width: 800px;position: absolute;left: 0;top: 0;display: none;}
.container img:first-child{display: block;
}
.arrow {width: 41px;height: 69px;background: url(../img/icon-slides.png) no-repeat;cursor: pointer;
}.left-arrow {position: absolute;left: 10px;top: 50%;transform: translateY(-50%);background-position: -83px 0;
}
.left-arrow:hover{background-position: 0 0;
}
.right-arrow {position: absolute;right: 10px;top: 50%;transform: translateY(-50%);background-position: -124px 0;
}
.right-arrow:hover{background-position: -41px 0;
}
ul {width: 120px;position: absolute;bottom: 10px;left: 50%;transform: translate(-50%);
}ul li {width: 10px;height: 10px;background: rgba(0, 0, 0, .8);border-radius: 50%;float: left;margin-left: 20px;list-style-type: none;
}ul li:hover {background: rgba(255, 255, 255, .8);
}ul li:first-child {margin: 0;
}.active {background: #fff;
}

html代码

 <div class="container"><div class="container-img"><img src="./img/6.jpg" alt=""><img src="./img/7.jpg" alt=""><img src="./img/8.jpg" alt=""><img src="./img/9.jpg" alt=""></div><div class="left-arrow arrow"></div><div class="right-arrow arrow"></div><ul></ul></div>

js代码

<script>var s =$('img');for(var j=0; j<s.length; j++){$('ul').append('<li></li>')}$('li').eq(0).addClass('active');var c = 0;var timer = setInterval(run, 2000);var count = $('img')function run() {c++;if (c > count.length-1) {c = 0;}$('img').eq(c).fadeIn(1000).siblings('img').fadeOut(1000); //图片淡入淡出$('ul>li').eq(c).addClass('active').siblings('li').removeClass('active'); //相邻li取消白点}$('ul>li').mouseover(function () {  //鼠标移动到li上图片跟着动c = $(this).index();$('img').eq(c).show().siblings('img').hide();$('ul>li').eq(c).addClass('active').siblings('li').removeClass('active');})$('.container img').hover(function () { //鼠标放上停止轮播clearInterval(timer);}, function () {timer = setInterval(run, 2000);})$('.right-arrow').mousedown(function () { //点击右箭头c++;if (c == count.length) {    c = 0;}$('img').eq(c).show().siblings('img').hide();$('ul>li').eq(c).addClass('active').siblings('li').removeClass('active');})$('.left-arrow').mousedown(function () { //点击左箭头c--;if (c == -1) {c = count.length - 1;}$('img').eq(c).show().siblings('img').hide();$('ul>li').eq(c).addClass('active').siblings('li').removeClass('active');})</script>

实现效果

简单的手写jquery轮播图（包含切换按钮、小圆点）相关推荐

手写jQuery轮播图（无缝回到第一张）
前言轮播图是学习前端必须会的,面试的时候经常会面试到.轮播图的难点在于最后一张到第一张怎么实现无缝滚动,这是一种思维方式的转变. 原理我们以3张的轮播图为例讲解. 如下图,制作三张轮播图时需要放4 ...
响应式html轮播图,最简单的响应式jQuery轮播图插件
easySlider.js是一款轻量级.简单易用的响应式jQuery轮播图插件.easySlider.js可以根据视口的大小来动态修改轮播图的尺寸.它压缩后的版本仅5K大小,简单实用. 使用方法在页 ...
微信小程序自定义swiper轮播图面板指示点|小圆点|进度条
描述: 在工作中开发一个页面,多少都会用到轮播图,但是由于微信官方提供的轮播图swiper组件局限性太大了,所以接下来我会教大家怎么去自定义轮播图的进度条. 简单修改: 如果你的项目只是简单的修改小圆 ...
VUE手写横向轮播图
前提:自己封装的轮播图,暂时没测出bug,有优化方案欢迎留言~ 效果如下图,一行三个,点击上一张/下一张向前或向后移动一格,窗口缩放会适当变形,不影响切换 <template><d ...
关于JQuery轮播图页面切换加载问题解决
当页面使用轮播图,在跳转到该页面会出现闪白问题解决方法:使用相同大小图片进行占位,隐藏轮播图,当页面加载完成后隐藏占位图,显示轮播图. 可以使用window.onload或者定时器去操作,这个只是我 ...
html ul 圆点轮播图,实现轮播图图片重叠及小圆点
轮播图 /* 设置图片的容器大小 */ .img-list{ width: 300px; height: 300px; /* 上下100 左右居中 */ margin: 100px auto; /* ...
css+js手写卡片轮播图
实现点击的时候切换卡片,自动轮播,鼠标移入暂停,移出继续轮播,有动画事件效果就是这样下面是代码 <html lang="en"><head><me ...
关于修改swiper轮播图插件中的小圆点变成背景图
当我们使用swiper插件时,底部的小点点需要修改成图片样式的形状,下面分享一下如何修改:  <div class="swip ...
使用开源项目【Banner】实现轮播图效果（带小圆点）
banner开源项目地址:GitHub - youth5201314/banner:

简单的手写jquery轮播图（包含切换按钮、小圆点）

简单的手写jquery轮播图（包含切换按钮、小圆点）

简单的手写jquery轮播图（包含切换按钮、小圆点）相关推荐

最新文章

热门文章