首先来分析一下轮播图效果的实现原理：
1、父元素作为显示窗口，大小固定超出部分隐藏，即设置overflow:hidden;
2、子元素存放图片列表用ul，ul固定定位，参照为父元素，即父元素position:relative;ul元素position:absolute;
4、初始时，ul的left为0，这时第一张图片即第一个li显示
5、点击下一张按钮，将整个ul左移，使第二个li对齐父元素的左边框，此时ul的left为负的一个li的宽度
6、点击上一张按钮，将整个ul右移
7、对特殊情况进行处理，即第一张图时点上一张，最后一张图时点下一张
第一张图时点上一张，我们滚动到最后一张图，整个ul左移，即把left值改为负的n-1张图的宽度；
最后一张图时点下一张，我们滚到第一张图的位置，整个ul右移，即把left值改为0
用一张图来帮助理解：
修改ul元素的left值很简单ul.style.left=设定值，就可以了，但我们想有一个滑动的效果，那我们需要用setInterval来实现
最后的效果如下：
动图不能录制太大CSDN有2M的限制_(:зゝ∠)_
下面放代码
script部分
window.onload= function () {
var nav=document.getElementById("nav").getElementsByTagName("li");
var img=document.getElementById("imgList");
var prev=document.getElementById("prev");
var next=document.getElementById("next");
var index=0;//当前图片序列号
var timer;//定时器名字
var iSpeed=-10;//滚动的速度
function goRoll(){
timer=setInterval(function () {
img.style.left=img.offsetLeft+iSpeed+'px';
var stop=-index*870+'px';//当达到目标位置是停止定时器
if(img.style.left==stop){
iSpeed=-10;
clearInterval(timer);
}
},10)
}
// 上一张和下一张点击效果
prev.onclick= function () {
if(index==0){
index=2;
iSpeed=-20;
}else{
index--;
iSpeed=10;
}
goRoll();
//img.style.left=-index*870+'px';
};
next.onclick= function () {
if(index==2){
index=0;
iSpeed=20;
}else{
index++;
iSpeed=-10;
}
goRoll();
//img.style.left=-index*870+'px';
};
}
html放一下
Box">
