用原生JS实现轮播图

首先用我的思路总结一下：

 

1.设置一个最外层的容器，这个容器就是我们要展示图片的区域，用overflow:hidden将超出显示区域的内容全部隐藏掉。

2.在最外层容器内设置一个大图容器，用来将要展示的图片按从左到右的顺序排放，比如使用ul，将其宽度设成最外层容器宽度*N（图片数量）,并且设置绝对定位position:absolute,因为我们要通过控制left属性来移动整个大图实现图片切换的效果。

3.在大图容器里面使用li来存放要展示的图片，使用float:left让所有图片在大图容器里面从左到右排列。

4.使用js修改left值控制大图容器向左或向右移动，通过循环定时器进行连续小幅度修改left以达到动画的连贯效果。

详解JS：

首先我们的轮播图要动起来，利用定时器现在自动滚动的效果，图片的转换牵涉到了层叠，最后我们再考虑到浏览器的兼容问题！

做到这些，是我们js的第一步。自动播放的函数play（），主要就是setTimeOut。

 

 		// 自动播放函数；
		    function play() {
		        timer = setTimeout(function () {
		            next.onclick();
		            play();
		        }, interval);
		    }
		    // 停止自动播放函数；
		    function stop() {
		        clearTimeout(timer);
		    }		// 自动播放函数；
		    function play() {
		        timer = setTimeout(function () {
		            next.onclick();
		            play();
		        }, interval);
		    }
		    // 停止自动播放函数；
		    function stop() {
		        clearTimeout(timer);
		    }

 

 

封装小圆点切换功能函数；

 

		    function showButton() {
		        // 重置所有按钮；
		        for (var i = 0; i < buttons.length ; i++) {
		            if( buttons[i].className == 'on'){
		                buttons[i].className = '';
		                break;
		            }
		        }
		        buttons[index - 1].className = 'on';
		    }

 

 

 

两边的点击事件：

 

		// 左箭头点击切换事件；
		    prev.onclick = function () {
		        if (animated) {
		            return;
		        }
		        // 同步小圆点的index；
		        if (index == 1) {
		            index = 5;
		        }
		        else {
		            index -= 1;
		        }
		        animate(600);
		        showButton()