如何用JS实现轮播图

简单介绍一下我们今天这个轮播图的功能： 自动切换图片，点击前一页，后一页切换图片，点击图片导航切换图片，划上图片暂停图片自动切换，划出继续自动切换图片。自动切换我们考虑用到定时器

我们把图片，图片导航和上下按钮分别创建

    <div>
        <ul>
            <li class="active">
            <!-- 首页展示图片-->

                <img src="./imgs/iu1.jpg" alt="">
            </li>
            <li>
                <img src="./imgs/iu2.jpg" alt="">
            </li>
            <li>
                <img src="./imgs/iu3.jpg" alt="">
            </li>
            <li>
                <img src="./imgs/iu4.jpg" alt="">
            </li>
        </ul>
        <ol>
            <li class="active">1</li>
            <!-- 图片对应的图片导航序号 -->
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ol>
        <span id="up">&lt;</span>
        <span id="down">&gt;</span>
    </div>

分别获取到图片，上下按钮及图片导航

<script>
    var imgs = document.querySelectorAll('ul li');//获取图片
    var div = document.querySelector('div');//获取div盒子
    var down = document.querySelector('#down');//获取下一张按钮
    var up = document.querySelector('#up')//获取上一张按钮
    var lis = document.querySelectorAll('ol li');//获取所有图片导航
</script>

上面我们使用querySelector（）方法获取上下键时，需注意id名前面的#
下面声明一个下标，及一个空对象指针（后定时器用）；

var index = 0, time = null;

首先我们应该考虑到，当某张图片展示出来的时候，别的图片就要隐藏，这个时候我们就可以来先封装一个排他方法↓

function getHtml(ind) {//封装排他
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].classList.remove('active');//清除其它图片的class名
            lis[i].classList.remove('active');清除其他图片导航的class名
        }
        imgs[ind].classList.add('active');//赋值当前项class名
        lis[ind].classList.add('active');//赋值当前项class名
    }

下一页点击事件，图片换下一张，也就是图片对应的下标增加，即index++

 down.onclick = function () {//下一张键，点击事件
        index++;//下标加加就是下一张图片
//下标超过我们图片的数量，将没有图片可以展示，所以我们来判断
        if (index > imgs.length - 1) {//当下标大于图片数量
            index = 0;//图片将回到展示第一张
        }
        getHtml(index)//排他传入实参（index）
    }

上一页点击事件，图片换上一张，也就是图片对应的下标减小，即index--

 up.onclick = function () {//上一张键点击事件
        index--;//对应下标减小就是上一张
//图片是没有负数下标的，所以我们要判断
        if (index < 0) {//当下标小于0的时候
            index = imgs.length - 1;// 图片将回到最后一张
          }
        getHtml(index)//排他传入的下标也是index；
    }

接下来我们来实现，让图片自动播放下一张。需要打开定时器，定时器的图片切换顺序和下一张键的顺序一致，我们可以考虑把切换下一张来封装为一个函数

function getAuto() {//封装切换下一张，
        index++;

        if (index > imgs.length - 1) {
            index = 0;       }
        getHtml(index)；
    }

此时我们的下一页键可以执行这个函数

down.onclick = function () {//下一张键，点击事件
        getAuto()
    }

打开定时器

time = setInterval(getAuto, 1000);//定时器执行++;

因为getAuto本来就是我们封装好的函数，所以不需要（）

鼠标划上图片自动切换停止，鼠标划出图片继续切换。就需要我们鼠标划上时清除定时器，划出时打开定时器

 div.onmouseover = function () {//鼠标划入事件
        clearInterval(time);//鼠标划入，定时器停止
        time = null;//定时器赋空
    }
    div.onmouseout = function () {//鼠标划出事件
        time = setInterval(getAuto, 1000);//鼠标划出定时器重新开启
    }

最后我们设置图片导航的点击事件

 for (var i = 0; i < lis.length; i++) {//首先循环图片导航长度
        lis[i].ind = i;//来保留每个下标
        lis[i].onclick = function () {//图片导航点击事件
            index = this.ind;//图片下标和当前点击下标保持一致
            getHtml(this.ind);//排他传入实参为当前下标

        }
    }

这样我们就完成了一个具有自动切换图片，点击前一页，后一页切换图片，点击图片导航切换图片，划上图片暂停图片自动切换，划出继续自动切换图片功能的轮播图啦！