用js实现点击切换+自动切换的轮播图

用js实现点击切换+自动切换的轮播图

之前博主写过一篇用css实现轮播图的文章,可以看到用css实现的轮播图也能实现我们所需要的功能。那么这些功能用js该如何实现呢？我们一起来看下吧！

(ps:博主在用js写轮播图的过程中,在网上查阅了很多篇文章,但是没有一篇是博主能彻底理解的[笨蛋QAQ]，所以这篇博客用来帮助像博主一样没有头绪,看不懂网上部分教程的伙伴)。

首先我们要明白轮播图的滑动原理,假设我们有装着3张图片的大盒子pic,那么我们可以采用定位或者浮动让这3张图片横向排成一排,那么大家想一想我们是不是移动大盒子的左/右边距就能显示出相应的图片呢？那么我们先来看一下代码

HTML:

    <div class="box">
        <!-- 图片 -->
        <ul id="pic">
            <li class="pic_items">1</li>
            <li class="pic_items">2</li>
            <li class="pic_items">3</li>
        </ul>
        <!-- 左右箭头 -->
        <span id="lf">左</span>
        <span id="rt">右</span>
        <!-- 圆点 -->
        <ul id="cir">
            <li class="cir_items"></li>
            <li class="cir_items"></li>
            <li class="cir_items"></li>
        </ul>
    </div>

CSS:

	
        .box{
            overflow:hidden; 
            width:940px;
            height:100%;
            margin:0 auto;     
        }
        #pic{
            width:2820px;
            height: 500px;
        }
        .pic_items{
            width:940px;
            height:100%;
            float:left;
        }
        .pic_items:nth-child(1){
            background:pink;
        }
        .pic_items:nth-child(2){
            background: gray;
        }
        .pic_items:nth-child(3){
            background:green;
        }

这样就完成了基本的轮播图布局,那么我们再给轮播图添加上圆点和左右切换按钮,一个静态样式的轮播图就完成了。（注意这里要给大盒子开启定位:position:relative;）

CSS

        .box{
            position:relative;
            overflow:hidden; 
            width:940px;
            height:100%;
            margin:0 auto;     
        }
                /* 箭头 */
        span{
            position:absolute;
            width:50px;
            height:100px;
            background:black;
            color:#fff;
            text-align:center;
            line-height:100px;
            cursor: pointer;
        }
        #lf{
            left:0;
            top:50%;
        }
        #rt{
            right:0;
            top:50%;
        }
        /* 圆点 */
        #cir{
            position:absolute;
            bottom:20px;
            right:100px;
            width:100px;
            height:20px;
        }
        .cir_items{
            width:20px;
            height:20px;
            border-radius:10px;
            background:#fff;
            float: left;
            margin-right:10px;
            cursor: pointer;
        }

接下来就到了最重要的js部分，根据之前的思路,我们是不是只需要设置大盒子pic的距离,就可以实现相应图片的切换对吧.那么我们先写出这部分代码：

JS:

        // 获取图片id
        var pic = document.getElementById('pic');
        var picItems = document.getElementsByClassName('pic_items');
        // 获取左右箭头id
        var lf = document.getElementById('lf');
        var rt = document.getElementById('rt');
        // 获取圆点
        var cirItems = document.getElementsByClassName('cir_items');
        // 索引
        var index = 0;
        // 实现移动功能的函数
        function change(){  
            pic.style.marginLeft = -index*940+"px";
        }

这个时候我们去运行程序,发现没有什么效果,为什么呢，那么大家想一想,我们的图片是不是有3张啊,index表示的我们图片的索引。
从0开始。那么在以上的代码中是不是index=0；仅仅显示的是第一张图片。所以我们要想办法改变index的值,才能显示出我们想要显示的图片。我们可以给change（）函数传入的一个参数i，这个i就表示我们想要显示的图片。
那我们再想一想，图片只有3张,如果i=4，那么这个我们没有第4张图该怎么办呢，是不是可以让图片从头显示啊，也就是说如果传入的参数i超过了我们的图片总张数,我们可以让图片从头开始显示。反之,如果图片小于我们第一张图片的索引，我们可以让图片从最后一张图开始显示。

JS：

        // 实现移动功能的函数
        function change(i){
            index = i;    
            if(i > picItems.length-1){
                index = 0;
            }
            if(i < 0){
                index = picItems.length - 1;
            }
            pic.style.marginLeft = -index*940+"px";
        }

这样我们算是完成了代码的核心功能部分,那么接下来我们开始实现左右切换功能。仅仅需要在进行左右点击的时候传入相应的参数i就行了。

        // 左切换
        lf.onclick = function(){
            change(--index);
        }
        // 右切换
        rt.onclick = function(){
            change(++index); 
        } 

接着我们进行圆点的切换,思路很简单,我们在点击第一个圆点时，切换到第一张图,只需要把change（）函数中的参数i和我们的当前的圆点索引对应起来就行了。

        // 圆点切换:let的作用域是整个代码块,因此可避免使用闭包
        for(let i=0;i<cirItems.length;i++){
            cirItems[i].onclick = function(){
                index = i;
                change(index);
            }
        }

最后,我们只需要给change（）函数里面添加一个计时器，实现自动轮播就可以了，但是不要忘记清楚计时器哦

        var timer;
        // 实现移动功能的函数
        function change(i){
            index = i;    
            if(i > picItems.length-1){
                index = 0;
            }
            if(i < 0){
                index = picItems.length - 1;
            }
            clearTimeout(timer);
            pic.style.marginLeft = -index*940+"px";
            timer = setTimeout(function(){change(++index);},2000);
        }

以上就完成了点击切换和自动切换的效果。可以看一下效果图，大家可以给左边距添加以下过渡属性，这样会更自然一点，以下是效果图(未添加过渡属性)