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-col


 

 

在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的时候,这个时候,显示的是最后一张图,这张图下面那张图就是第一张图的克隆图,因此,这个时候,小点的样式就需要添加给第一个点。

 

完成以上操作之后,简单的轮播图就做好了。