javascript原生代码实现轮播图片
原理：一系列的大小相等的图片平铺，利用CSS布局只显示一张图片，其余隐藏。通过计算偏移量利用定时器实现自动播放，或通过手动点击事件切换图片。
案例代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{margin:0;padding:0;text-decoration: none;}body{padding:20px;}#container{width:600px;height:400px;border:3px solid #333;overflow: hidden;position: relative;}#list{position: absolute;width: 4200px;height:400px;z-index: 1;}#list img{float: left;width:600px;height:400px;}#buttons{position: absolute;left:250px;bottom:20px;z-index: 2;width:100px;height:10px;}#buttons span{float:left;margin-right: 5px;width:10px;height: 10px;border:1px solid #fff;border-radius: 50%;background: #333;cursor: pointer;}#buttons .on{background: orangered;}.arrow{position: absolute;top:180px;z-index: 2;display: none;width: 40px;height:40px;font-size: 36px;font-weight: bold;line-height: 39px;text-align: center;color:#fff;background-color: rgba(0,0,0,0.3);cursor: pointer;}.arrow:hover{background-color: rgba(0,0,0,0.7);}#container:hover .arrow{display: block;}#prev{left:20px;}#next{right:20px;}</style>
<script type="text/javascript">window.onload=function(){//准备工作 获取节点var container = document.getElementById("container");var list = document.getElementById("list");var buttons = document.getElementById("buttons").getElementsByTagName("span");var prev = document.getElementById("prev");var next = document.getElementById("next");var index = 1;var timer;//动画-animate offsetLeft style.leftfunction animate(offset){//获取到style.left 第一张 一定是负值//style.left 是一个字符串 --要计算parseInt()var newLeft = parseInt(list.style.left)+offset;list.style.left = newLeft+'px';// 无限滚动的判断if(newLeft > -600){list.style.left = -3000+'px';}if (newLeft < -3000) {list.style.left = -600+'px' ;}}//自动播放function play(){timer = setInterval(function(){next.onclick();},2000);}function stop(){clearInterval(timer);}function buttonShow(){// 控制buttons的样式for (var i = 0; i < buttons.length; i++) {if(buttons[i].className=="on"){buttons[i].className ="";}}//控制buttons的indexbuttons[index-1].className="on";}prev.onclick = function(){index -= 1;if(index < 1){index = 5;}animate(600);buttonShow();}next.onclick = function(){index+=1;if(index>5){index = 1;}animate(-600);buttonShow();}for (var i = 0; i < buttons.length; i++) {(function(i){buttons[i].onclick = function(){//点到了哪个span 就获取哪个span的index属性var clickIndex = parseInt(this.getAttribute("index"));var offset = 600*(index-clickIndex);animate(offset);index = clickIndex;buttonShow();}})(i)}container.onmouseover = stop;container.onmouseout = play;play();}</script></head><body><div id="container"><div id="list" style="left:-600px;"><img src="image/5.jpg" alt="1"/><img src="image/1.jpg" alt="1"/><img src="image/2.jpg" alt="2"/><img src="image/3.jpg" alt="3"/><img src="image/4.jpg" alt="4"/><img src="image/5.jpg" alt="5"/><img src="image/1.jpg" alt="5"/></div><div id="buttons"><span index="1" class="on"></span><span index="2" ></span><span index="3" ></span><span index="4" ></span><span index="5" ></span></div><a href="javascript:void(0)" id="prev" class="arrow"><</a><a href="javascript:void(0)" id="next" class="arrow">></a></div></body></html>
注意：要实现自动轮播，必须有定时器进行计时。
setInterval()执行多次，setTimeout()只执行一次。
自动轮播需要我们每隔一段时间执行一次，选择setInterval()函数。
实现轮播的几个要点：
（1）容器的css布局。
（2）每一次轮播通过偏移量left实现，手动轮播的按钮绑定每一次偏移量增加还是减少一张照片宽度的偏移量。
（3）自动轮播，通过setInterval()方法实现定时器，执行下一张的点击函数
（4）鼠标控制轮播的暂停和继续。通过onmouseover为暂停，onmouseout为继续。
