前端无缝滚动

2016-12-22 本文已影响215人 zoomsk

修改图片和jquery 还有对应宽度即可用

实际放置图片要比放置图片多一张,当倒数第二张切换到最后一张刚完成的时候,瞬间把,整个ul移到left等于0的位置，接下来我们看到的就是第一张图片到第二张图片的切换，所以就没有了最后一张直接切换到第一张的那种别扭的情况了。

在线demo地址： www.aazzp.com

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>无缝滚动   </title>
           <style>
         *{
             margin: 0;
             padding: 0;
         }
         #slide-box{
             position: relative;
             overflow-x: hidden;
             width: 615px;
             height: 420px;
         }
         ul,li{
             margin: 0;
             padding: 0;
         }
         #slide-box>ul{
             position: relative;
             width: 3000px;
             height: 420px;
             left: -0;
         
         }
         #slide-box>ul>li{
             position: absolute;
             top: 0;
             
         }
         #slide-box .slide1{
              left: 0
         }
         #slide-box .slide2{
              left: 615px;
         }
         #slide-box .slide3{
              left: 1230px;
         }
         #slide-box .slide4{
              left: 1845px;
         }
         #slide-box .slide5{
              left: 2460px;
         }
         #slide-box .slide6{
              left: 3075px;
         }

     </style>

 </head>
 <body>

     <div id="slide-box">
         <ul>
             <li class="slide1">![](img/nba01.jpg)</li>
             <li class="slide2">![](img/nba02.jpg)</li>
             <li class="slide3">![](img/nba03.jpg)</li>
             <li class="slide4">![](img/nba04.jpg)</li>
             <li class="slide5">![](img/nba05.jpg)</li>
             <li class="slide6">![](img/nba01.jpg)</li>
                             
         </ul>
     </div>
     
     <script src="js/jquery-mini.js"></script>
     <script> 
     $(function(){
         function slideImg(obj,width){//定时轮播无缝滚动
             var children = obj.children('li').length - 1;

             setInterval(function(){
                 var left = parseInt(obj.css('left'));
                 
                 if(left<=-width*children){
                     obj.css('left',0);
                     left = -width;
                 }else{
                     left -= width;
                 }
                 left = left+ 'px';
                 obj.animate({left: left});      

             },2000) ;//每次滚动切换时间 

         }

         slideImg($('#slide-box').find('ul'),615); //传入ul和图片宽度  

     })
     </script>
 </body>
 </html>

在线demo地址： www.aazzp.com

前端无缝滚动

修改图片和jquery 还有对应宽度即可用

同类文章

猜你喜欢

热点阅读

前端无缝滚动

修改图片和jquery 还有对应宽度 即可用

同类文章

猜你喜欢

热点阅读

修改图片和jquery 还有对应宽度即可用