JavaScript demo练习之轮播图

一、功能概述

五张图片自动循环播放，底部导航栏随之循环变化，点击导航栏可以直接切换到某张图片，并继续自动循环播放。

二、实现步骤

1. 实现页面布局。
2. 为导航栏绑定点击函数，实现点击切换图片。
3. 使用setInterval()为图片建立自动循环播放效果。
4. 实现切换图片与自动播放效果的结合。

三、代码实现

<div id="showPics">
        <div id="picArea">
            <img src="images/pic1.jpg">
            <img src="images/pic2.jpg">
            <img src="images/pic3.jpg">
            <img src="images/pic4.jpg">
            <img src="images/pic5.jpg">
            <img src="images/pic1.jpg">
        </div>
        <div id="nav">
            <div class="navItems selected"></div>
            <div class="navItems"></div>
            <div class="navItems"></div>
            <div class="navItems"></div>
            <div class="navItems"></div>
        </div>
    </div>

var navItems = document.querySelectorAll(".navItems");
var picArea = document.querySelector("#picArea");
var index = 0;
var timer;
for (let i = 0; i < navItems.length; i++) {
    navItems[i].onclick = function () {
        clearInterval(timer);
        clearInterval(picArea.timer);
        index = i;
        // move(picArea,"left",-920*index,80,function(){
        //     autoPlay();
        // });
        picArea.style.left=-920*index+"px";
        autoPlay();
        setNav();
    }
}
function autoPlay() {
    timer = setInterval(() => {
        index++;
        if (index == 6) {
            index = 1;
            picArea.style.left = 0;
        }
        setNav();
        move(picArea, "left", -920 * index, 80);
    }, 2000);
}
function setNav() {
    for (let i = 0; i < navItems.length; i++) {
        if (i == index) {
            navItems[i].classList.add("selected");
        } else {
            navItems[i].classList.remove("selected");
        }
        if(index==5){//若是最后一张照片（和第一张相同），则第一个navItem被选中
            navItems[0].classList.add("selected");
        }
    }
}
setNav();
autoPlay();

四、问题总结

1.图片循环播放

要实现播放到最后一张图片时，自动从头开始播放。这里使用了“障眼法”，将第一张和最后一张图片设置为相同的图片，在正常切换到最后一张图片时，将图片区域的left值设置为0，由于是相同的图片在及短的时间内切换，视觉上并没有什么变化，但是却可以实现从头开始播放。

2.点击切换和自动播放的timer冲突

使用timer需要特别注意的一点是多个timer同时存在的问题。
在这个demo中特别需要注意的是，整个程序中其实有两个主要的timer，一个是每隔两秒图片自动切换到下一张的timer（记作timer1），一个是图片切换时的timer（记作timer2）。即：timer1的作用是每隔两秒启动timer2，而timer2的作用是每50毫秒将图片向左移动80px（即代码中的move()函数，具体代码没有给出）。为了保证点击切换图片完成后才开始自动播放，将自动播放函数作为回调函数传入了move()里，只有当move中的timer结束后才调用自动播放函数。 否则又会出现多个timer同时存在的问题。
而点击切换图片的效果有两种，这两种效果对于计时器的操作是有区别的，下面逐一讲解。

2.1 使用move()函数来“逐帧”切换到该图片：

    navItems[i].onclick = function () {
        clearInterval(timer);
        index = i;
        move(picArea,"left",-920*index,80,function(){
            autoPlay();
        });
        setNav();
    }

这种情况下，在onclick里面首先清除了控制自动播放的timer，并且调用了move函数，这样picArea的计时器便被自动覆盖了，只存在控制当前图片切换到特定图片的timer。否则若在自动播放时点击切换图片，会同时有两个timer，效果混乱。

2.2 直接切换到该图片

    navItems[i].onclick = function () {
        clearInterval(timer);
        clearInterval(picArea.timer);
        index = i;
        picArea.style.left=-920*index+"px";
        autoPlay();
        setNav();
    }

这种情况中不使用move()来切换图片，也就不存在上述自动覆盖操作，要想在切换时不受自动播放的timer的干扰，需要手动销毁自动播放的timer。否则在切换到指定图片的一瞬间，自动播放的timer仍在运行，效果混乱。