使用Jquery实现轮播图

虽然轮播图已经有很多第三方库，但是手动实现一个还是能够对javascript有一个更深的理解。

今天就讲一讲如何使用Jquery实现轮播图

首先html结构如下： 

     // 结合下面的css样式可以知道： 下面是五张轮播图片一开始重叠在

      // 父级元素的左上角，轮播图在JS中是通过opacity透明度来控制是否显示的

       

     

           

• 

           

• 

           

• 

           

• 

           

• 

           

• 

       

       

             

           

           

           

           

           

           

       

       

            〈

            〉                         

       

 

CSS样式如下：

.scroll #scroll  img {

  width: 1226px;

  position: absolute;

  top: 0;

  left: 0;

}

.scroll_dot {

  width: 120px;

  height: 10px;

  position: absolute;

  bottom: 20px;

  right: 20px;

  z-index: 20;

}

.scroll_dot span {

  width: 6px;

  height: 6px;

  border: 2px solid #e0e0e0;

  background: #cdcac2;

  border-radius: 50%;

  margin: 0 5px;

  display: block;

  float: left;

}

.scroll_dot .scroll_dot_span {

  background: white;

}

.scroll_arrows span {

  width: 41px;

  height: 70px;

  text-align: center;

  line-height: 69px;

  color: #5f5750;

  position: absolute;

  top: 50%;

  font-size: 40px;

  z-index: 20;

  margin-top: -35px;

}

.scroll_arrows .scroll_arrows_back {

  background: #5f5750;

  color: white;

}

.scroll_arrows .left {

  left: 260px;

}

.scroll_arrows .right {

  right: 0;

}

 下面重点看一下JS部分是如何实现的

       var n = 0;  //记录轮播图当前索引

        var t = setInterval(fun, 5000); // 设置一个定时器用于播放轮播图

  

      // 重点： 轮播图的播放函数，

        function fun() {

            n++;

            // 此时判断轮播图索引是否越界，如果越界则将n重置为0

            if (n > $(".scroll>ul>li").length - 1) {            

                n = 0;

            }

           // 这里可以看到是通过opacity来控制轮播图是否显示的

          // eq(n)表示从当前li集合中指定索引为n的元素

            $(".scroll>ul>li").css("opacity", "0").eq(n).css("opacity", "1")

   // 控制轮播图下面的圆点样式，实现圆点跟随轮播图移动（移动的圆点是白色背景，默认是灰色背景，白色更显眼）    ，   siblings表示该元素所在集合中的其他兄弟元素  $(".scroll_dotspan").eq(n).addClass("scroll_dot_span").siblings().removeClass("scroll_dot_span");

           }

     // 点击左箭头让轮播图回调到上一张图片

        $(".scroll_arrows .left").click(function () {

            n -= 2; // 这里减二，是因为fun函数中: n会自增+1，而后面会调用fun函数。

            if (n < -1) { // 这里是判断越界：如果当前已经是第一张图片，那么再回退就轮转到最后一张图片，也就是索引是5，但是fun函数会自增加1，所以n取值4。

          左越界的标准是小于-1是因为如果是-1，那么到了fun函数自增+1就变成了0，那么就是第一张图片了，相当于原地不动。

                n = 4;

            }

            fun()

        });

    //  点击右箭头让图片快进一张

        $(".scroll_arrows .right").click(function () {

            fun()

        });

   // 点击轮播图圆点时，将图片切换到该圆点索引对应的图片     

   $(".scroll_dot span").click(function () {     

            // 获取点击圆点的索引      

            n = $(this).index() - 1;   // index()函数是jquey中获取该元素在所属集合中的索引。

          // 将除了被点击圆点之外的圆点都设置为默认灰色背景，当前被点击圆点的背景设为白色

            $(this).siblings().removeClass("scroll_dot_span").end().addClass("scroll_dot_span");

            fun()  // 播放圆点对应的图片

        });

        // 这里hover函数接收两个参数：移入时执行的函数和移出时的函数，中间用逗号做分隔符

        // 这是jquery hover方法特有用法

        $(".scroll").hover(function () {

            clearInterval(t); // 鼠标移入时清除定时器

        }, function () {

            // 鼠标移出时，又设置了一个定时器

                t = setInterval(fun, 5000);

            });

 从以上代码可以看到：代码的核心是js定时器, 全局图片索引的确定，jquery对dom元素的样式控制，轮播图中对索引越界的判断。