原生js实现轮播图

一.原生js实现轮播效果
分析需求：
幻灯片的效果就是在一个可视区域里面，若干个图片进行交替出现，像在下面的图中，可视区域中的图是轮流出现的。

那么如何来实现这个效果呢，我百度了一下大部分都是什么调节left的大小，我没看懂，于是自己来动手来思考怎么做。

首先，刚开始的时候，这个区域就只放一张图，等到需要切换的时候就把这个img的src属性修改为需要展示图片所在的位置。

那么如何来实现这个功能呢？

首先来定义一个全局数组用来存放所有的图片的位置，还有一个全局变量num用来记载这次应该轮到第几个图片位置出现在该区域

var num = 0;
var arrUrl = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];

接下来写切换函数，切换函数的主要功能就是将img的src属性改到当前需要的位置。

function changeImg(){
    img.src = arrUrl[num]; // 修改图片的src位置
    // 如果图片下方有需要显示的圆点就在这里修改，或者其他对应的信息也在这里修改
    for(var i = 0;i

接下来分析需要切换的事件

首先是轮播切换，就是一个定时器，定时的调用这个切换函数，并且这里需要注意num的值，因为num切换到最后一张，下一张就应该是第一张。

接下来是点击左右切换按钮，左切换按钮要留意切换到第一张的时候，需要将下一张定义为最后一张，右切换按钮需要留意最后一张，下一张是第一张。

最后是小圆点点击跳转到对应的图片。

按照上面的思路，首先来写轮播切换，轮播切换无非就是一个定时器，定时的切换这个图片，所以我们来写一个定时切换的函数

定义一个全局变量定时器（当需要停止定时切换的时候就清除，需要继续的时候就继续调用）

var timer = null;//定义一个空对象来存放定时器
 
function autoPlay(){
 
    timer = setInterval(function(){
 
        num++;//切换下一张的num
 
        num %=arrUrl.length;//这里是关键，循环播放图片的关键
 
        },2000);//定时器
 
}
 

这里就是定时器的方法实现了。

只要在全局函数中调用就行了

setTimeout(autoPlay,1000);//延时播放，这样就不用一刷新页面立马切换图片。

接下来就是左右切换图片的实现了。左边切换的时候num–，但是要注意num=0的时候，下一场num=arr.Url.length，右切换则相反。

left.onclik = function(){
    num--;
    if(num == -1){
        num = arrUrl.length-1;
    }
    changeImg();//调用切换函数
}
right.onclik = function(){
    num++;
    if(num == arrUrl.length){
        num =0;
    }
    changeImg();//调用切换函数
}
 

当图片下面的小圆点点击跳到对应的图片。这里需要为每个原点的index属性添加一个值，就是它对应的i的值，这样每次点击小圆点，直接将img.src = arrUrl[this.index]就可以了。

for(i = 0;i

到了这里，基本都完成了，再添加一个鼠标移入清除定时器，鼠标移出继续调用就可以了

content.onmouseover = function(){
        clearInterval(timer);
    }
contentonmouseout= aotoPlay;

全部代码：

最终效果