利用jQuery手动实现一个轮播图
目前有很多的轮播图插件，但是有些时候需要兼容低版本浏览器的时候，很多插件就不再兼容，因此我们需要自己手动的实现轮播图的功能，下面给大家简单的介绍一下如何使用jQuery开发一个轮播图。
这是我自己做的一个简单的轮播图，效果图如下：
我觉得轮播图中最主要的是要理解到图片为什么会滑动，是怎么控制的。上面这个我自己做的，是搭好的一个结构，在无序列表中插入需要的图片。然后在插入图片的后面添加一个空的无序列表，作为轮播图中下方的小点。
<div class="box">
<ul class="imageList">
<li><img src="img/轮播1.jpg"/></li>
<li><img src="img/轮播2.jpg"/></li>
<li><img src="img/轮播3.jpg"/></li>
<li><img src="img/轮播4.jpg"/></li>
</ul>
<ul class="num">
</ul>
</div>然后就是css中书写样式了，首先肯定得把无序列表中的li从从上至下排列变为水平方向排列，也就是给li添加一个float属性；然后有一点需要注意，轮播图外面的大盒子必须设置为图片的大小，超出的隐藏，这样可以刚刚好显示出一张图片。然后装图片的ul的宽度必须大于或者等于所有图片总宽度。同样，这里也需要运用一个定位的知识，子绝父相。给class为box的盒子设置相对定位，装图片的ul设置绝对定位。这里，尽管轮播图下面几个点没有，但是我们要把样式先写好，然后后面通过JavaScript添加。
主要样式如下：
.box{
width: 500px;
height: 300px;
background-color: lightgrey;
margin-top: 30%;
overflow: hidden;
position: relative;
}
.imageList img{
width: 500px;
height: 300px;
}
.imageList{
width: 2500px;
list-style: none;
float: left;
position: absolute;
}
.imageList li{
float: left;
}
.box .num{
position: absolute;
width: 100%;
bottom: 10px;
left: 0;
text-align: center;
}
.box .num li{
width: 10px;
height: 10px;
background-color:white;
border-radius: 50%;
display: inline-block;
margin: 0px 3px;
cursor: pointer;
}
.box .num li.on{
background-color:orange;
}在HTML文件和css样式表都已经写好之后，我们就可以开始书写js代码了，让图片动起来。
在JavaScript中让图片动起来的核心函数是setInterval(function（）{}，value);这个函数是一个定时器，第一个参数是你想让某个对象执行的事件或者动作，然后第二个参数value则是时间，意思是多少时间执行一次。
然后在轮播图中，想让图片动起来并且从视觉上看没什么异样，我们首先需要克隆第一张图片，并且将第一张图片加在最后。具体代码如下：
var clone = $(".box .imageList li").first().clone();
$(".box .imageList").append(clone);这个代码是用jQuery书写的，首先获取到轮播图那个大盒子，然后再找到轮播的图片这个对象，然后用first（）方法找到第一张照片，并且用clone（）这个方法将第一张照片克隆，最后用append（）方法把克隆下来的这张照片添加到所有轮播图片的后面，这样克隆工作就完成了。
接下来就是让这个图片动起来了，动起来很简单，只需要设置一个定时器就ok，代码如下：
var t=setInterval(function(){
i++;
move();
},2000);这时定时器中的move（）函数并没有定义，接下来我们就定义这个函数，代码如下：
function move(){
if(i==size){
i=1;
$(".box .imageList").css({left:0});
}
$(".box .imageList").stop().animate({left:-i*500},500);
if (i==size-1) {
$(".box .num li").eq(0).addClass("on").siblings().removeClass("on");
} else{
$(".box .num li").eq(i).addClass("on").siblings().removeClass("on");
}
}首先要定义一个变量i，初始值为0，每执行一次定时器，i的值便会加1。在定义一个size值，令其等于轮播图中图片的数量。然后让装所有图片的容器往左移动图片的宽度*i，这样在定时器的配合之下，图片就会一张一张的一次展示。可想而知，i的值肯定有个范围，不可能让它永远的加大，因此在move函数中，我们需要一个判定。当i=size的时候，这个时候轮播图中的照片肯定已经到了最后一张，这个时候我们前面克隆了第一张照片加在最后，因此这张照片虽然是最后一张，但是其实它是第一张照片。这时，我们就需要重置i的值，令i=1；并且通过jQuery控制样式，令装照片的容器回到初始位置，开始新的一次运动。
最后就是初始图片中的那几个点了，这个更简单了，我们获取了size的值之后，再通过for循环，就可以添加那几个点了。代码如下：
var size=$(".box .imageList li").size();
for (var j=0;j<size-1;j++) {
$(".box .num").append("<li></li>");
}这个难点在于怎么让小点的位置随着图片的移动而移动。首先我们默认将在css中定义好的样式赋予第一个小点。代码如下：
$(".box .num li").first().addClass("on");然后就是在move函数中定义小点的相应的移动,代码如下：
if (i==size-1) {
$(".box .num li").eq(0).addClass("on").siblings().removeClass("on");
} else{
$(".box .num li").eq(i).addClass("on").siblings().removeClass("on");
}很明显，小点的样式也是通过i来确定的。这里有一个误区，很多人会认为第一个小点就是1，但是其实不是，因为数组是从0开始的，所以第一个小点是0。i的值代表了显示的是第i-1张图片，所以这个时候只需要将样式赋予第i个点就行了，并且同时要清除其他的点的样式。特殊的当i=size-1的时候，这个时候，显示的是最后一张图，这张图下面那张图就是第一张图的克隆图，因此，这个时候，小点的样式就需要添加给第一个点。
完成以上操作之后，简单的轮播图就做好了。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。