步骤：
1、布局：
outer[div]
----imgList[ul]
----li(总共5个)
----img(放轮播图)
----navDiv[div]
----a（总共5个）
2、原理：
- outer作为“屏幕”，超出屏幕的部分hidden。
- imgList里面的li排成一排，imgList包含在outer中。
- JS控制imgList，左右移动。
- a标签根据索引值：-indexA*li宽度，得出每张图片的开始位置，完成点击a标签，切换图片。
3、注意：
- move函数的实现，应该好好理解。
- 点击a标签的优先级，应该高于定时轮播，所有点击a标签的时候，停止定时器，完成动画后，开启定时器。
- 这是一个类似循环播放的效果——最后一张图片很关键，用于完成瞬间移动。
测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--
步骤：
1、布局：
outer[div]
----imgList[ul]
----li(总共5个)
----img(放轮播图)
----navDiv[div]
----a（总共5个）
2、原理：
- outer作为“屏幕”，超出屏幕的部分hidden。
- imgList里面的li排成一排，imgList包含在outer中。
- JS控制imgList，左右移动。
- a标签根据索引值：-indexA*li宽度，得出每张图片的开始位置，完成点击a标签，切换图片。
3、注意：
- move函数的实现，应该好好理解。
- 点击a标签的优先级，应该高于定时轮播，所有点击a标签的时候，停止定时器，完成动画后，开启定时器。
- 这是一个类似循环播放的效果——最后一张图片很关键，用于完成瞬间移动。
-->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#outer {
width: 500px;
height: 333px;
margin: 10px auto; /*左右居中*/
background-color: greenyellow;
padding: 10px 0; /*设置上下的padding为10px*/
position: relative;
overflow: hidden;
}
#imgList {
list-style: none; /*去除li的默认样式*/
width: 2600px;
left:0px;
position: absolute; /*开启绝对定位，便于移动*/
}
#imgList li {
float: left; /*float:父元素够大的时候，才会横排*/
}
#navDiv {
position: absolute; /*设置绝对定位，才能显示到上面*/
bottom: 15px;
}
#navDiv a {
float: left; /*浮动，脱离文档流，横排*/
width: 12px;
height: 12px;
margin: 0 5px;
background-color: red;
opacity: 0.5;
/*兼容IE8透明*/
filter: alpha(opacity=50);
}
#navDiv a:hover {
background-color: black;
}
</style>
<script src="js/tools.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function() {
//获取节点
var outer = document.getElementById("outer");
var imgList = document.getElementById("imgList");
var countImg = imgList.getElementsByTagName("li");
var navDiv = document.getElementById("navDiv");
var allA = navDiv.getElementsByTagName("a");
//第一张图片的a标签先被选中
var indexA = 0;
allA[indexA].style.backgroundColor = "black";
//为所有的a标签绑定单击响应函数
for (var i = 0; i < allA.length; i++) {
//保存超链接所在索引（前面的课程说过为什么这样）
allA[i].num = i;
//绑定单击响应函数
allA[i].onclick = function() {
//点击超链接时，应该停止轮播定时器，不然会出现两个动画
clearInterval(idTimer);
//点击超链接，切换图片
indexA = this.num;
move(imgList,"left",indexA*-500,20,function(){
//点击的动画执行完了，开启轮播定时器
autoChange();
});
//a标签颜色处理
mutexA();
}
}
//设置导航按钮居中
var navDivWidth = parseInt(getComputedStyle(navDiv,null)["width"]);
var outerWidth = parseInt(getComputedStyle(outer,null)["width"]);
navDiv.style.left = (outerWidth - navDivWidth)/2 + "px";
//设置imgList宽度（图片+20）*数量
var imgWidth = 500;
var imgMargin = 0;
imgList.style.width = (imgMargin + imgWidth)*countImg.length + "px";
//轮播图片
var idTimer;
function autoChange() {
idTimer = setInterval(function() {
indexA++;
//a标签设置
move(imgList,"left",indexA*-500,20,function(){
mutexA(allA,indexA);
});
},3000);
}
//开启定时器
autoChange();
//互斥a标签
function mutexA() {
//索引值回到开头
if( indexA >= countImg.length - 1) {
indexA = 0;
imgList.style.left = 0 + "px";
}
//该索引a标签变黑色，其它标签红色
for (var j = 0; j < allA.length; j++) {
if( j == indexA ) {
allA[j].style.backgroundColor = "black";
} else {
allA[j].style.backgroundColor = ""; //这样做是因为，内联样式优先级更高，
//直接设置为red，会覆盖hover效果，
//这里直接去掉内联样式，它就受style里面的样式控制了
}
}
}
}
</script>
</head>
<body>
<div id="outer">
<ul id="imgList">
<li>
<img src="img/1.jpg"/>
</li>
<li>
<img src="img/2.jpg"/>
</li>
<li>
<img src="img/3.jpg"/>
</li>
<li>
<img src="img/4.jpg"/>
</li>
<li>
<img src="img/5.jpg"/>
</li>
<li>
<img src="img/1.jpg"/>
</li>
</ul>
<!-- 导航按钮 -->
<div id="navDiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
