用Jquery制作一个无缝滚动轮播

这篇文章的目的是帮助自己复习，还有写东西的时候的思路。

Paste_Image.png

首先我们看一下制作一个轮播的思路:

• 先把轮播的HTML和CSS给写好，这一步就不多讲，本文章主要讲的是JS的实现。
• 既然是无缝的轮播，那么首先图片就要排成一排
• 有一个视口，超出视口的图片要隐藏（在CSS实现，overflow：hidden）
• 滚动的时候视口进行偏移，偏移到下个图片
• 到最后一张（或第一张往前）的时候，要连续的滚动，而不是瞬间回滚到第一张
  有了思路就可以开始实现JS了
  先附上HTML结构：

    
    

        

            
![](http://upload-images.jianshu.io/upload_images/1469441-9585c5b76366d055.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            
![](http://upload-images.jianshu.io/upload_images/1469441-ba3e88027c3139a0.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            
![](http://upload-images.jianshu.io/upload_images/1469441-7a64285ff69de434.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            
![](http://upload-images.jianshu.io/upload_images/1469441-af3eeeddd9808e10.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        
        <
        >
        

            

            

            

            

        
    

首先我们写效果的第一步是什么？就是拿到相应的DOM节点

 var    $ct = $('.img-ct'),      //获取视口节点
        $items = $ct.children(), //获取视口下需要轮播的图片元素
        $pre = $('.pre'),       //获取上一张功能按钮
        $next = $('.next'),     //获取下一张功能按钮
        imgWidth = $items.width(),//获取滚动元素的宽
        imgCount = $ct.children().size(),//获取有多少个滚动的元素

下面的代码是要实现思路4，5的核心，很重要！

        $ct.prepend($items.last().clone()),
        $ct.append($items.first().clone());
        imgnewwidth = $ct.children().size();
        $ct.css({left:0-imgWidth,width:imgnewwidth*imgWidth})

• 第一行首先获取到轮播图片元素的最后一张然后clone，然后将clone后的副本prepend到视口的第一个
• 第二行同理，把第一张clone一下append到最后面
• 第三行重新计算元素的数量，原本是4个。现在变成了6个（这里要注意！重新计算数量要重新查找DOM元素，不能直接利用上面的$items.size来计算，要重新使用$ct.children().size），不然还是4张！）
• 第四行设置视口的初始位置和它的总宽度
  然后元素的排列就变成了如下视口图（自己画的有点丑）

Paste_Image.png

其中数字代表的是图片的顺序，因为我们上面设置了视口的初始位置（left:0-imgWidth这里我给设置的图片宽度为500px），那么初始位置就变成了-500px，那么显示的图片就是第一张了（按上面那张图就是第二张）。
接下来开始绑定事件，我们想实现一个功能的时候，要先想能做什么，在去想要怎么做：

    $next.on('click',function(){
                playnext();
            })
    $pre.on('click',function(){
                playpre();
            })

这里我们为前进和后退按钮绑定了事件，当我点前进按钮的时候就会执行playnest函数，然后我们下面再想playnext函数的实现。

        var curidx =0;//声明初始的坐标
        var mov = 1;//移动的次数
            function playnext(){
                $ct.animate({left:'-='+mov*imgWidth},function(){
                    //当点击后，会执行这个动画，把视口向右移动一个图片宽度的距离，就刚好像滚动一样
                    curidx+=mov;//然后坐标加1，表明移动一格
                    if(curidx===imgCount){
                        $ct.css({left:0-imgWidth});
                        curidx=0;
                    }
                    //如果已经移动到了最后一张图片，也就是末尾clone的1图片，就马上将视口设置为刚开始那样，因为同一张图片的变换人是看不出来的，然后再把坐标给设置回0.
                })
            }

反之，后退按钮是一样的：

    function playpre(){
                $ct.animate({left:'+='+mov*imgWidth},function(){
                    curidx-=mov;
                    if(curidx===(-1)){
                        $ct.css({left:0-imgWidth*imgCount});
                        curidx=3;
                    }
                })
            }

就是修改了下其中的参数，具体可以参考之前的视口图食用。
这样就完成啦！看看效果吧！
这是源码
无缝轮播demo