使用js/jquery编写首尾衔接的图片轮播图

使用js/jquery编写首尾衔接的图片轮播图

#实现思想

编写两个存放图片列表的容器，两个容器并排放置，同时向左滚，等第一个滚出头后，把第一个放在第二个容器的后面，成为第二个容器，就这样达到首尾相接循环滚。

html模块

      <section class=" ad_section" >
               <!-- 此处的left:0px必须设置，否者第一次的滚动不会触发trasition，会直处处的 -->
               <figure class="ad_figure " style="left:0px;trasition:left 1s;">
                   <img src="/static/img/indexN_ad1.png"/>
                   <img src="/static/img/indexN_ad2.png"/>
                   <img src="/static/img/indexN_ad3.png"/>
                   <img  src="/static/img/indexN_ad4.png"/>
                   <img src="/static/img/indexN_ad5.png"/>
                   <img src="/static/img/indexN_ad6.png"/>
                   <img src="/static/img/indexN_ad7.png"/>
                   <img src="/static/img/indexN_ad8.png"/>
                   <img src="/static/img/indexN_ad9.png"/>
                   <img src="/static/img/indexN_ad10.png"/>
                   <img src="/static/img/indexN_ad11.png"/>
               </figure> 
               <figure class="ad_figure" >
                   <img src="/static/img/indexN_ad1.png"/>
                   <img src="/static/img/indexN_ad2.png"/>
                   <img src="/static/img/indexN_ad3.png"/>
                   <img  src="/static/img/indexN_ad4.png"/>
                   <img src="/static/img/indexN_ad5.png"/>
                   <img src="/static/img/indexN_ad6.png"/>
                   <img src="/static/img/indexN_ad7.png"/>
                   <img src="/static/img/indexN_ad8.png"/>
                   <img src="/static/img/indexN_ad9.png"/>
                   <img src="/static/img/indexN_ad10.png"/>
                   <img src="/static/img/indexN_ad11.png"/>
               </figure> 
       </section> 

css模块

.ad_section{
    display: block;
    overflow: hidden;
    height:80px;
    position:relative;
    z-index: 8;
}
 .ad_figure{
    width: auto;
    display: inline;
    white-space: nowrap;
    position: absolute;
    z-index: 9;
}
.ad_figure img{
    display: inline-block;
    vertical-align: middle;;
    margin:auto 79px auto 0px;
}

js模块

function loop(){
   this.sumlength = $(".ad_section figure:eq(0)").outerWidth();//获取要滚动容器的width
   this.currnettranslatex1=0;//第一个容器每次滚动的距离
   this.currnettranslatex2=this.sumlength;//第二个容器每次滚动的距离
   this.currentimg=0;//因为每张图片的width不一，利用一个变量保存当前图片的序号
   var intervalF = setInterval(function(){
        this.step = parseInt($(".ad_section figure:eq(0) img").eq( this.currentimg).outerWidth())+79;//滚动的步长
        this.currnettranslatex1 += (-this.step);//第一个容器每次滚动的距离
        this.currnettranslatex2 += (-this.step);//第二个容器每次滚动 的距离
          $('.ad_section figure:eq(0)').css({'left':this.currnettranslatex1+'px','transition':'left 1s'});//容器1利用left实现滚动，transition实现优美点的滚动
          $('.ad_section figure:eq(1)').css({'left':this.currnettranslatex2+'px','transition':'left 1s'}); //容器2同上
          if(this.currentimg<10){
             this.currentimg++;
          }else{//当第一个容器滚完后
            this.currentimg=0;//当前图片序号归0
            this.currnettranslatex1 = 0;//第一个容器的left归为初始值
            this.currnettranslatex2 =this.sumlength;//第二个容器的left归为初始值
             $($('.ad_section figure:eq(0)')).insertAfter($('.ad_section figure:eq(1)'));//把第一个滚玩的容器放到后面接着滚
             $('.ad_section figure:eq(0)').css('left',this.currnettranslatex1+'px');
             $('.ad_section figure:eq(1)').css('left',this.currnettranslatex2+'px');
          }   
   },1000); 
}

loop();

查看效果链接
此链接还在坐飞船，到了再更新。