用少量JavaScript代码实现轮播图

JavaScript原生代码手写轮播图

代码思路

1. 获取到对应的标签
2. 设定两个全局变量,当前索引index和上一索引 lastIndex
3. 封装清除和添加 class属性 , 上一索引对的图片按钮清除class,当前添加class,实现切换效果
4. 给btn按钮添加点击事件
5. 给向左,向右点击添加事件,实现点击切换
   1. 这里需要对index的值进行判断,最大值为length-1,最小值为0;
   2. 如果index值大于length-1,index=0;如果index小于0,index=length-1;
6. 封装自动轮播函数
7. 封装鼠标移入停止,移出继续轮播函数

<style>
    *{padding: 0;margin: 0;}
    ul,ol,li{list-style: none;}
    a{text-decoration: none;}
    img{display: block;}
    .clear::after{content: ""; clear: both; display: block;}
    #banner{
        width: 850px;
        height: 500px;
        margin: 50px auto;
        overflow: hidden;
        position: relative;
        cursor: pointer;
    }
    #pic li{
        width: 850px;
        height: 500px;
        position: absolute;
        left: 0;
        top: 0;
        background: #fcc;
        font-size: 40px;
        text-align: center;
        line-height: 500px;
        color: white;
        z-index: 0;
        transition: opacity 1.5s; /*结合c3实现过渡效果*/


    }
    #pic li.active{
        z-index: 5;
        opacity: 1;
    }
    #btns{
        position: absolute;
        right: 3%;
        bottom: 10px;
        z-index: 6;
    }
    #btns li{
        width: 20px;
        height: 20px;
        background: rgba(0,0, 0,.5);
        color: #fcc;
        margin-left: 5px;
        text-align: center;
        line-height: 20px;
        float: left;
        cursor: pointer;
    }
    #btns li.active{
        background: orange;
        color: white;
    }
    #banner a{
        position: absolute;
        top: 50%;
        margin-top: -10px;
        height: 40px;
        line-height: 32px;
        text-align: center;
        width: 40px;
        font-size: 40px;
        vertical-align: middle;
        color: white;
        background: rgba(0, 0, 0, .6);
        z-index: 6;
    }
    #goPrev{left: 0;}
    #goNext{right: 0;}
</style>

<div id="banner">
        <ul id="pic" class="clear">
            <li style="background: rgb(212, 12, 12);" class="active">拯救一个人,就是拯救整个世界</li>
            <li style="background: rgb(10, 10, 221);">永远都不要忘记你所爱的人</li>
            <li style="background: rgb(202, 170, 128);">每个人都要走一条自己坚定的路</li>
            <li style="background: rgb(59, 206, 191);">最后那些无聊的事情,才是值得怀恋的</li>
            <li style="background: rgb(218, 13, 218);">我们一路奋战不是为了改变世界</li>,
        </ul>
        <ol id="btns" class="clear">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        <a href="JavaScript:;" id="goPrev">&laquo;</a>
        <a href="JavaScript:;" id="goNext">&raquo;</a>
    </div>

<script>
        // 获取标签
        var div = document.querySelector('#banner');
        var imgs = document.querySelectorAll('ul>li');
        var btns = document.querySelectorAll('ol>li');
        var goPrev = document.querySelector('#goPrev');
        var goNext = document.querySelector('#goNext');
        // 定义全局的当前索引和上一索引
        var index = 0;
        var lastIndex = 0;
        // 给lastINdex清除class,给index增加class
        function changeImg() { 
            btns[lastIndex].classList.remove('active');
            imgs[lastIndex].classList.remove('active');
            btns[index].classList.add('active'); 
            imgs[index].classList.add('active'); 
         }
        // btns点击按钮
        Array.from(btns).forEach((item,key) => {
            item.onclick = function () {
                // 将当前的索引赋值给上一索引
                lastIndex = index;
                // 将当前key赋值给index
                index = key;
                changeImg();
            }
        })
        // 向右点击
        goNext.onclick = function () { 
            lastIndex = index;
            index++;
            // 判断index是否超出了范围,超出范围让index恢复初始值0
            // index的合理范围为 0 ~ length
            if(index === imgs.length) index = 0;
            changeImg();
         }
         // 向左点击
        goPrev.onclick = function () { 
            lastIndex = index;
            index--;
            // 判断index是否超出了范围,超出范围让index值为length-1
            if(index < 0) index = imgs.length-1;
            changeImg();
         }
        //  自动轮播
        autoLoop();
        function autoLoop() { 
            // 将定时器赋值给一个变量,可以是在全局中定义一个,也可以使用 对象.属性 的方法
            div.time = setInterval(function(){
                // 在定时器中调用向右点击事件,相当于自动点击
                goNext.onclick();
            } , 3000)
        }
        // 鼠标移入,暂停
        div.onmouseenter = function() {
            clearInterval(div.time);
        }
        // 鼠标移出,继续轮播
        div.onmouseleave = autoLoop;
    </script>