轮播图案例

给大家先讲一下大致思路：

1，先获取；
2，左右按钮分别给点击事件，点击下一张图片，除下一张其他图片都要隐藏，这时就要用到排他思想，
3，让他自己执行，就要用到定时器；
4，鼠标划进去，图片自执行停止，就得清除定时器；鼠标划出去，图片继续播放；
5，点击图片导航切换图片需要用到tab切换原理；

具体代码如下：

HTML部分

<body>
    <div>
        <ul >
            <li class="active"><img src="./images/movie1.jpg" alt=""></li>
            <li><img src="./images/movie10.jpg" alt=""></li>
            <li><img src="./images/movie9.jpg" alt=""></li>
            <li><img src="./images/movie8.jpg" alt=""></li>
            <li><img src="./images/movie7.jpg" alt=""></li>
            <li><img src="./images/movie6.jpg" alt=""></li>
        </ul>
        <ol>
            <li class="sky">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ol>
        <span id="zuo">&lt;</span>
        <span id="you">&gt;</span>
    </div>
</body>
<script src="./js/index.js">

css样式

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

@mixin wh($w, $h, $b) {
    width: $w;
    height: $h;
    background-color: $b;
}

div {
    @include wh(1000px, 560px, none);
    margin: 0 auto;
    position: relative;

    ul {
        li {
            @include wh(100%, 550px, none);
            display: none;

            img {
                @include wh(100%, 100%, none);
            }
        }

        .active {
            display: block;
        }
    }
    ol{
        position: absolute;
        bottom: 30px;
        float: left;
        li{
            @include wh(40px,40px,#fc2);
            float: left;
            color: #ffffff;
            border-radius: 50%;
            text-align: center;
            line-height: 40px;
            font-size: 25px;
            margin-left: 50px;
        }
      
        .sky{
            background-color: red;
            color: #ffffff;
        }
      
    }

    span {
        @include wh(80px, 120px, rgba(34, 23, 45, 0.5));
        position: absolute;
        top: 50% ;
        margin-top:-60px;  
        font-size: 50px;
        line-height: 120px;
        text-align: center;
        color: #ffffff;
        &:nth-of-type(1){
            position: absolute;
            left: 0px;
        }
        &:nth-of-type(2){
            position: absolute;
            right: 0px;
        }
    }

}

js部分，我们先获取

    var zuo = document.querySelector('#zuo');//获取第一个按钮
    var you = document.querySelector('#you');//获取第二个按钮
    var imgs = document.querySelectorAll('ul li');//获取图片
    var ol_lis = document.querySelectorAll('ol li');//获取li
    var divs = document.querySelector('div');//获取div
    var index = 0,time = null;//下标从0开始，为了让每秒下标增加|减少，让下标对应的图片显示，其他图片隐藏；

给右边那妞点击事件

    you.onclick = function () {//右按钮点击事件
        index++; //图片要跟随下标增加，让下标对应的图片显示；
        if (index > imgs.length - 1) { //到最后一张图片，然后下标归为0
            index = 0 //下标归0
        }
        getauto()//排他思想调用
    }

左边按钮点击事件

    zuo.onclick = function () {//左边点击事件
  index--;//点击跟随下标减少，让下标对应的图片显示，其他图片隐藏；
        if (index < 0) {
            index = imgs.length - 1;//返回最后一张图片
        }
        getauto();//排他调用
    }

给定时器函数封装

function getrr() {
    index++; //图片要跟随下标增加，让下标对应的图片显示；
    if (index > imgs.length - 1) { //到最后一张图片，然后下标归为0
        index = 0 //下标归0
    }
    for (var i = 0; i < imgs.length; i++) {
        //排他思想
        imgs[i].classList.remove('active');//当前项移除
        ol_lis[i].classList.remove('sky');//li与图片相对应移除；
    }
    imgs[index].classList.add('active');//添加下一项
    ol_lis[index].classList.add('sky');//li与图片相对应增加

定时器，让他自己执行


    time = setInterval(getrr, 1000);//定时
    divs.onmouseover = function () {//鼠标划进去
        clearInterval(time);//清除定时器
        time = null;//将定时器赋空
    }
    divs.onmouseout = function () {//鼠标划出去
        time = setInterval(getrr, 1000);//定时器继续执行

    }

封装排他

    function getauto() {
      
        for (var i = 0; i < imgs.length; i++) {
            //排他思想
            imgs[i].classList.remove('active');//当前项移除
            ol_lis[i].classList.remove('sky');//li与图片相对应移除；
        }
        imgs[index].classList.add('active');//添加下一项
        ol_lis[index].classList.add('sky');//li与图片相对应增加

    }

点击图片导航让对应的图片显示出来

    for (var i = 0; i < ol_lis.length; i++) {
        getxia();//调用函数
    }

    function getxia() {//封装函数
        (function (ind) {
            ol_lis[ind].onclick = function () {//ol里每个li的点击事件
                for (var j = 0; j < ol_lis.length; j++) {
                    index = ind//将原点的下标和图片同步
                    //排他思想
                    imgs[j].classList.remove('active');
                    ol_lis[j].classList.remove('sky');
                }
                imgs[ind].classList.add('active');
                ol_lis[ind].classList.add('sky');
            }
        })(i)
    }

。。。大家可以试着尝试一下