jquery简单无缝轮播图实现

Posted 2020-09-07 晓晓de烟火

此简单轮播图布局原理是：

一个div包含图片列表，和控制按钮。其宽度等于图片的宽度，溢出隐藏。

图片要左浮动。

jquery原理：

开一个定时器，隔一段时间执行图片列表向左移动一个图片的宽度，同时在移动时设置一个回调函数。

把向左移动的图片，也是图片列表的第一张图片，添加到图片列表ul的末尾。

这样实现了，图片自动播放的效果。

 

怎么带动图片控制的小按钮变亮？

 

因为每一次图片轮播，都会改变图片值得索引，那就给函数加一个变量 i ，每一次执行定时器都会i++；

 var spanindex=i%4; 

图片的索引就和图片的索引同步了。4是按钮的个数。图片移动把对应的spanindex添加一个类即可。

 

按钮控制轮播图，我就不讲述了。

 

例子：

 <div class="side-img">
              <div>                                    <!-----------4个按钮------------------------>
                  <span class="on"></span>
                  <span></span>
                  <span></span>
                  <span></span>
              </div>
              <ul>
                  <li><a href=""><img src="images/side-img1.png"/> </a> </li>
                  <li><a href=""><img src="images/side-img2.png"/></a> </li>
                  <li><a href=""><img src="images/side-img3.png"/> </a> </li>
                  <li><a href=""><img src="images/side-img4.png"/></a> </li>
              </ul>
          </div>

 

css代码：

 .side-img{
    height: 324px;
    width: 693px;
    position: relative;
    overflow: hidden;
}
.side-img ul{
    width:2772px;
    position: absolute;
    left: 0;
}
 .side-img li{
   float: left;
}
 .side-img li img{
    height: 324px;
}
.side-img div{
    position: absolute;
    left: 316px;
    top:304px;
    z-index: 2;
}
 .side-img div span{
    float: left;                                 
    margin-right: 5px;
    width:8px;
    height: 8px;
    background-color: #ffffff;
    border: 1px solid #d2cfd0;
    border-radius: 50%;
}
#main .center .side-img div span.on,#con1 .con1-left .side-img div span.on{
    background-color: red;
}

 

jq:

  /************图片移动函数库***********/
    var timer=null;
    var i=0;
   function play(obj,ispeed){
             ++i;
            var spanindex=i%4;
       var span=  $("#main .center .side-img div span")
           obj.animate({left:ispeed},1000,function(){
               $(".side-img ul>li").eq(0).appendTo($(this));
           span.eq(spanindex).addClass("on").siblings().removeClass("on");

        })
   }
    /************轮播图自动滚动***********/

    timer=setInterval(function(){
      var obj= $("#main .center .side-img ul")
        var ispeed= $(".side-img ul li").eq(0).width;
        play(obj,-ispeed);
    },3000);

    /************控制按钮控制图片移动***********/

    $("#main .center .side-img div span").hover(function(){
        var index=$(this).index();
        $(this).addClass("on").siblings().removeClass("on");
        clearInterval(timer);
       var  iwidth=index*-693;
       $(".side-img ul").animate({left:iwidth},500);
    },
    function(){
        timer=setInterval(function(){
            var ispeed= $(".side-img ul li").eq(0).width;
            play(ispeed);
        },3000);
    })

 

本人第一次写博客，可能有纰漏的地方，望各位指点。