用易烊千玺图片做的轮播图切换。
图片可设置每隔3秒自动切换，也可手动点击图片下面的方块进行手动切换
HTML文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#outer{
width: 520px;
height: 500px;
margin: 50px auto;
background-color: gold;
padding: 10px 0;
position: relative;
overflow: hidden;
}
#imgList{
list-style: none;
/*width: 2600px;*/
position: absolute;
left: 0;
}
#imgList li{
float: left;
margin: 0 10px;
}
#navDiv{
position: absolute;
bottom: 15px;
}
#navDiv a{
float: left;
width: 15px;
height: 15px;
background-color: red;
/*设置透明*/
opacity: 0.5;
/*兼容IE8的透明*/
filter: alpha(opacity=50);
margin: 0 5px;
}
#navDiv a:hover{
background-color: black;
}
</style>
</head>
<body>
<!--创建一个大div，作为大容器-->
<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>
<script type="text/javascript" src="js/move.js"></script>
<script>
var imgList=document.getElementById("imgList");
var imgArr=document.getElementsByTagName("img");
//设置imgList的宽度
imgList.style.width=520*imgArr.length+"px";
var navDiv=document.getElementById("navDiv");
var outer=document.getElementById("outer");
navDiv.style.left=(outer.offsetWidth-navDiv.offsetWidth)/2+"px";
//默认显示图片的索引
var index=0;
var allA=document.getElementsByTagName("a");
//设置默认选中的效果
allA[index].style.backgroundColor="black";
//为所有的超链接绑定单击响应函数
for(var i=0;i<allA.length;i++){
//为每一个超链接都添加一个num属性
allA[i].num=i;
allA[i].onclick=function(){
//关闭自动切换的定时器
clearInterval(timer);
//获取点击超链接的索引，并将其设置为index
index=this.num;
//切换图片
/*
* 索引 left
* 第一张 0 0
* 第二张 1 -520
* 第三张 2 -1040
*/
//imgList.style.left=-520*index+"px";
//设置选中的a
setA();
//使用move函数切换图片
move(imgList,"left",-520*index,20,function(){
//动画执行完毕，开启自动切换图片
autoChange();
});
};
}
//开启自动切换图片
autoChange();
//创建一个方法来设置选中的a
function setA(){
//判断当前索引是否是最后一张图片
if(index>=imgArr.length-1){
//将index设置为0
index=0;
//此时显示最后一张图片，最后一张图片和第一张一模一样
//通过CSS将最后一张图片切换为第一张
imgList.style.left=0;
}
//遍历所有的a，并将它们的背景颜色设置为红色,使用样式表里的样式
for(var i=0;i<allA.length;i++){
allA[i].style.backgroundColor="";
}
//将选中的a的背景颜色设置为黑色
allA[index].style.backgroundColor="black";
};
//定义一个自动切换的定时器的标识
var timer;
//创建一个函数，用来自动切换图片
function autoChange(){
//开启一个定时器，定时切换图片
timer=setInterval(function(){
//索引自增
index++;
//判断index的值
index%=imgArr.length;
//执行动画，切换图片
move(imgList,"left",-520*index,20,function(){
//修改导航按钮
setA();
});
},3000);
};
</script>
</html>
js文件：
//定义一个函数，获取当前样式
function getStyle(obj, name) {
if(window.getComputedStyle) {
//正常浏览器
return getComputedStyle(obj, null)[name];
} else {
//IE8
return obj.currentStyle[name];
}
};
//定义一个变量，用来标识定时器
//var timer;
//创建一个可以执行简单动画的函数
/*
* 参数：
* obj：要执行动画的对象
* attr：要执行动画的样式 比如：left top height width
* target：执行动画的目标位置
* speed：移动的速度（正数向右移动，负数向左移动）
* callback：回调函数，将会在动画执行完毕后执行
*/
function move(obj, attr, target, speed, callback) {
//关闭上一个定时器
clearInterval(obj.timer);
//获取元素目前的位置
var current = parseInt(getStyle(obj, attr));
//判断速度的正负值
if(current > target) {
//此时速度为负值
speed = -speed;
}
//开启一个定时器，执行动画效果
//想执行动画的对象中添加一个timer属性，保存它自己的定时器标识
obj.timer = setInterval(function() {
//获取box1原来的left值
var oldValue = parseInt(getStyle(obj, attr));
//在旧值基础上增加
var newValue = oldValue + speed;
//向左移动，判断newValue是否小于target
//向右移动，判断newValue是否大于target
if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
newValue = target;
}
//将新值设置给obj
obj.style[attr] = newValue + "px";
//当obj移动到target时，停止移动
if(newValue == target) {
//达到目标，关闭定时器
clearInterval(obj.timer);
//动画执行完毕，调用回调函数
callback && callback();
}
}, 30);
};
