5分钟教你DIY简书首页轮播插件

效果图如下：

GIF.gif

源码放在Github上了：

我是源码

我是效果预览

基本功能：

1. 四张图片循环播放；
2. 无操作时自动从左到右播放；
3. 鼠标放在轮播图上时停止自动轮播，显示左右按钮；
4. 按左按钮，会显示左边的图片，按右按钮会显示右边的图片；
5. 鼠标移出后，又从当前开始自动播放；
6. 随着图片的移动，下方的小长条也会跟着移动；
7. 点击任意长条，会直接跳转至长条对应的图片。

原理介绍

图片从右往左或者从左往右的切换很容易理解，难点在于如何实现循环播放。下面就讲解循环播放的原理：

1. 将要展示的图片依次水平排列，本例一共要展示4副图片

   
   Paste_Image.png

2. 我们将要展示的图片放置在可视窗口，其它图片隐藏掉（背景色改为灰色，代表隐藏）

   
   Paste_Image.png

3. 由于可视窗口的位置是不能调整的，所以我们通过整体的向左或向右移动4副图片来达到图片切换的目的。

   
   Paste_Image.png

4. 但是当窗口移动到第一张图片上时，再往左切换就没有图片了，同样最后一张图片再往右切换也就没有图片了。但是我们的目的是到1号图片后再往左移动是4号图片，再往左是3号……一直循环，到4号图片再往右是1号图，再往右是2号图……一直循环。

   
   Paste_Image.png
   Paste_Image.png

5. 为了达到上述目的，我们必须做些手脚了！变化就是，在1号图左边加了一张4号图，再4号图右边加了一张1号图。

Paste_Image.png

6. 是时候上演魔术戏法了！
   这时当我们从1号图往左切换时，左边就有了一张可供使用的4号图替身，我们就可以营造一种又回到了4号图的假象。

Paste_Image.png Paste_Image.png
这样就毫无违和感了，但是如果用户继续向左拉动怎么办？难不成再造一个3号图替身？当然不是，当从1切换到4'这个动画执行完毕后，我们需要将4'瞬间切换到4，因为是瞬间，中间是没有缓慢的动画效果的，所以肉眼是感觉不到的，所以用户其实毫无察觉，但事实上我们已经变成下图了。 Paste_Image.png

这时候如果用户接着向左移动，4号图是不是就可以接上3号图了呢！

Paste_Image.png
向右拉的道理也是一样的，当到达1'后，我们要瞬间在换回1。
原理就是这样了，下面开始分析代码。

代码实现

HTML+CSS

轮播的4张图片放在ul的li里面，并利用浮动使他们在一排呈现（记得清除浮动哦），前面的4号图的复制品和后面的1号图复制品是通过js添加上去的，现在还没有，但是也可以提前在html中写好，都一样。

Paste_Image.png
设置父容器的大小刚好等于一张图片的大小，并且设置overflow：hidden将不显示的图片都隐藏掉（记得为父容器加上可爱的圆角）。 Paste_Image.png

利用两个a链接做出按钮的样式，使用绝对定位将他们放到合适的地方。

Paste_Image.png

再利用下面的ul中的li做出滚动条的效果，使用绝对定位将他们放到合适的地方。

Paste_Image.png

静态效果就做好了，接下来开始写JS，让轮播具有灵魂。

JS

注：JS使用了jquery

首先在放置图片的ul里面添加我们的备用图片4'和1'。克隆4和1并将4放在列表的头部，将1放在列表的尾部。

var $page0 = $pages.eq(0).clone();
var $page3 = $pages.eq(3).clone();
$content.append($page0);
$content.prepend($page3);

为按钮添加点击事件，点击按钮可以使图片向左或向右移动。$btnPre显示左边的图片（例如：当前为2，点击后切换至1），$btnNext显示右边的图片（例如：当前是2，点击切换至3）。stateLock防止用户在一个切换动画没完成时进行过多的点击。play()函数是执行左右切换动画的函数，可以向左也可以向右。

$btnPre.on("click",function(){
            if(!stateLock) return;
            stateLock = false;
            play($content,true);
        });

$btnNext.on("click",function(){
            if(!stateLock) return;
            stateLock = false;
            play($content,false)
        });

为底部滚动条添加点击事件。当点击滚动条时，要做两件事，一是将当前图片切换到滚动条对应的图片，二是改变点击的滚动条的颜色，并将其他滚动条恢复默认色。

//底部长条添加点击事件
        $(".carousel").on("click","li",function () {
            $(this).siblings().removeClass("active");
            $(this).addClass("active");
            var liIndex = $(this).index();
            if(liIndex>pageIndex){
                play($content,false,liIndex-pageIndex);
            }else if(liIndex<pageIndex){
                play($content,true,pageIndex-liIndex);
            }
        });

添加自动播放功能。每过2.5秒就自动向右切换一张。

var auto1 = setInterval(function () {
            play($content,false);
        },2500);

为插件整体添加鼠标移入移出事件。鼠标移入时，做两件事，一是关闭自动播放功能，二是显示向左向右的按钮（其实在css样式中，这两个按钮是被隐藏掉的，上面说的显示出来，是为了让大家看清楚）；鼠标移出后，也做两件事，但是相反，打开自动播放功能，然后隐藏按钮。

//显示按钮
        $wrapper.on({
            mouseover:function () {
                clearInterval(auto1);
                $btnNext.show();
                $btnPre.show();
            },
            mouseout:function () {
                auto1 = setInterval(function () {
                    play($content,false);
                },2500);
                $btnNext.hide();
                $btnPre.hide();
            }
        });

播放函数，传入三个参数，$obj是6张图片所在的父容器的jquery对象，dir是移动方向（true是向前移动，false是向后移动），len是一次移动的图片张数，默认是1张。移动的原理其实是改变父容器整体的绝对定位参数，然后利用animate方法添加动画效果。最后当图片移动后不能忘记改变其对应的滚动条的背景色。

function play($obj,dir,len) {
            //dir ：true 向前/false 向后
            if(len===undefined||len===null){
                len=1;
            }
            var symbol = dir?"+=":"-=";
            var backFlag = dir?-1:4;
            var clear = dir?3:0;
            var backIndex = dir?4:1;
            $obj.animate({
                left:symbol+len*pageWidth+"px"
            },function () {
                if(dir){
                    pageIndex -=len;
                    console.log(pageIndex);
                    if(pageIndex<backFlag+1){
                        pageIndex = clear;
                        $obj.css({
                            left:"-"+backIndex*pageWidth+"px"
                        })
                    }
                }else{
                    pageIndex +=len;
                    console.log(pageIndex);
                    if(pageIndex>backFlag-1){
                        pageIndex = clear;
                        $obj.css({
                            left:"-"+backIndex*pageWidth+"px"
                        })
                    }
                }
                $carousels.eq(pageIndex).siblings().removeClass("active");
                $carousels.eq(pageIndex).addClass("active");
                stateLock = true;
            })
        }

版权归饥人谷和本人所有，转载请注明出处