如何使用JS实现轮播图

当我们开始学习js后，终于要实现更加完善的轮播图了。但是这时我们难免会有些没有思路，所以我在此为大家提供一些轮播图的思路。
首先，我们想要做轮播图，需要了解一些所需要的相关方法。

window.setTimeout():

这个方法的意义是在设定时间过后执行目标函数。
这个方法有两个参数。第一个：传入一个function，用来设定执行的目标函数；第二个：传入一个数字（单位：毫秒）设定多久后执行目标函数。

取得元素节点对象的相关方法

document.getElementsByxxx()

通过元素类名/ID/标签名等获取.

document.querySelector() or document.querySelectorAll()

通过选择器选取（传入一个字符串，字符串里写选择器，注意一定要按选择器的形式来写），前者仅选择第一个元素，后者选取所有元素。

注意：无论是那种方法取得的是多个元素，其返回的都是一种“伪数组”。伪数组就是你可以像数组一样通过索引来取得元素，例如：document.getElementsByClassName("a")[0] 但是 不能使用数组的方法（因为不是数组，所以肯定不能用）。

轮播图原理

上面我们先了解了一些实现轮播图可能会用到的方法。现在我们来聊一下轮播图的原理。
实现轮播图，我们肯定要修改其css属性，如何修改就要看轮播图的实现方式。
我通过正常的轮播图来举例：通过修改内层盒子的margin-left值来使内层盒子相对外层盒子运动，从而实现轮播图效果。

相信对于轮播图效果的实现大家都能快速理解，且对于其他类型诸如渐入渐出轮播图等都是差不多的。就算实现自动切换，也不过是设置一个动画的事罢了。但是难点就在于把手动切换和自动切换结合在一起，这时就会有难点产生。
首先，如果使用动画来使轮播图自动切换，是无法再进行手动切换的。所以我们就需要通过js来实现其自动切换。自动切换可以用setInterval()来实现（这个函数与setTimeout基本一致，区别仅在于setTimeout只会在设定时间到后执行一次，而setInterval会在每过设定时间都会执行一次），设定一个change方法来切换下一张轮播图，让setInterval每过一段时间调用一次来切换即可。这样写基本就能结合手动切换和自动切换，但是有一个小问题，就是如果马上就要到执行setInterval的时间，但是我手动点击切换了一次，就会导致刚切换到我想看的那张轮播图，就会立刻切换到下一张。为了解决这个小问题，我们可以这样写（此方法作为所有切换的方法，只要是这个同一个轮播图的切换，都调用这同一个方法）

function change(i){
    /*当没有传入参数时调用此方法就会切换下一张*/
    if(i == undefined){
        index++;//index是一个去全局变量，表示当前显示的轮播图是第几张
    }else{
        index = i;
    }
    /*判断是否越界*/
    if(index < 1) index = max;//max表示最多轮播图的张数
    if(index > max) index = 1;
    //根据index修改css属性，此处以正常轮播图为例
    //此处需要注意
    //1.必须使用负值，为何是负值可以看着上面那个图自己思考一下
    //2.最后一定要加上"px"，因为这个值直接修改了其css属性，所以必须按照css的写法来写
    //imgWidth就是每张轮播图图片的宽度
    inner.style.marginLeft = -index*imgWidth +"px";
    //这里是重点！
    clearTimeout(pre);
    pre = setTimeout(change,1000);
}

让我们来解析一下重点部分的代码：clearTimeout这个方法的意思是清除一个定时器（setTimeout生成的，如果执行过了，执行清除不会报错，但是没有意义）而其参数就是setTimeout返回的一个数字，这个数字就如同这个定时器的id。
每次切换图片时，我们都会调用一次此方法，如果是自动切换，就会在每次切换时，清除一次定时器，但是由于定时器正在执行，实际上此次清除是无意义的；之后再执行setTimeout再次设置定时器，从而形成一个循环。
如果定时器还未执行，此时点击就会将正在准备的定时器清除，并创建一个新的定时器。
注意：想要页面开始就触发自动播放，可以在js最后加一句change(1);也就是切换到第一张，同时开启了循环。