1、轮播图.html(图片可自己修改)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>轮播图</title>
</head>
<link rel="stylesheet" type="text/css" href="css/轮播图.css"/>
<body>
<div id="outer">
<ul id="imgList">
<li><img src="img/唯美1.jpg" id="imgID"/></li>
<li><img src="img/唯美2.jpg" id="imgID"/></li>
<li><img src="img/唯美3.jpg" id="imgID"/></li>
<li><img src="img/唯美4.jpg" id="imgID"/></li>
<li><img src="img/唯美5.jpg" id="imgID"/></li>
<li><img src="img/唯美1.jpg" id="imgID"/></li>
</ul>
<!--<a id="left"><</a>
<a id="right">></a>-->
<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/tools.js" ></script>
<script type="text/javascript" src="js/轮播图.js"></script>
</html>
2、tools.js
/**
* 用来获取指定元素的当前样式
* 参数：
* 1、obj 要获取样式的元素
* 2、name 要获取的样式名
*/
function getStyle(obj,name){
if(window.getComputedStyle){
//正常浏览器的方式，具有getComputerStyle()方法
return getComputedStyle(obj,null)[name];
}else{
//IE8方式，没有getComputerStyle()方法
return obj.currentStyle[name];
}
}
/**
* 用来执行简单动画的函数
* 参数
* 1、obj：要执行动画的对象
* 2、attr：要执行动画的样式 比如：left、right、width、height
* 3、target：执行动画的目标位置
* 4、speed：移动速度(整数向右移动，负数向左)
* 5、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(){
var oldValue = parseInt(getStyle(obj,attr));
var newValue = oldValue + speed;
/**
* 判断newValue和target的关系
* 向左移动时需要判断newValue是否小于target
* 向右移动时需要判断newValue是否大于target
*/
if((speed<0 && newValue<target) || (speed > 0 && newValue>target) ){
newValue = target;
}
obj.style[attr] = newValue+"px";
//元素到达target停止动画
if(newValue == target){
//到达目的地，停止定时器
clearInterval(obj.timer);
//动画执行完毕，有回调函数时调用回调函数
callback && callback();
}
},30);
}
3、轮播图.js
/*设置装图片ul的宽度 */
var imgList = document.getElementById("imgList");
//获取页面中所有的img标签
var imgArr = document.getElementsByTagName("img");
//设置imgList的宽度
imgList.style.width = 800*imgArr.length+"px";
/*设置导航按钮居中*/
//获取navDiv
var navDiv = document.getElementById("navDiv");
//获取outer
var outer = document.getElementById("outer");
//设置navDiv的left值
navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
//显示图片的索引
var index=0;
//获取所有a
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);
//将点击超链接的num属性赋值给index以便切换图片
index = this.num;
//修改点击a之后的样式
setA();
//切换图片
/*
* 第一张：0 0
* 第二张：1 -800
* 第三张：2 -1600
*/
// imgList.style.left = -800*index+"px";
//使用tools.js中的move函数进行动画切换图片
move(imgList,"left",-800*index,50,function(){
//手动切换完成后再打开自动切换的定时器
autoChange();
});
};
}
//开启自动切换图片
autoChange();
//创建一个方法设置点击之后a的样式
function setA(){
//判断当前索引是否是最后一张图片
if(index >= imgArr.length - 1){
index = 0;
//此时显示最后一张图片，而最后一张图片和第一张图片是一模一样的
//通过css将最后一张切换成第一张
imgList.style.left = 0;
}
//遍历所有a，并将它们的背景色设置 为 红色
for(var i=0;i<allA.length;i++){
//因为css中有默认红色，这里设置为空串是为了防止a:hover之后颜色失效
allA[i].style.backgroundColor = "";
}
//将选中的a设置为黑色
allA[index].style.backgroundColor = "black";
};
var timer;
//创建一个函数用来开启自动切换图片
function autoChange(){
//开启一个定时器，用来定时切换图片
timer = setInterval(function(){
//使索引自增
index++;
index %= imgArr.length;
//执行动画，切换图片
move(imgList,"left",-800*index,50,function(){
//修改导航点
setA();
});
},3000);
}
4、轮播图.css
*{
margin: 0;
padding: 0;
}
#outer{
width: 800px;
height: 500px;
border: 1px solid red;
margin: 100px auto;
position: relative;
overflow: hidden;
cursor:pointer;
}
#imgList{
list-style: none;
/*开启绝对定位*/
position: absolute;
}
#imgList li{
float: left;
}
#outer img{
width: 800px;
height: 500px;
}
/*设置导航按钮*/
#navDiv{
position: absolute;
bottom: 20px;
}
#navDiv a{
/*开启浮动*/
float: left;
/*开启浮动后行内元素则变为了块元素，可以设置宽高*/
width: 25px;
height: 25px;
background-color: red;
/*设置左右边距*/
margin: 0 5px;
/*设置透明*/
opacity: 0.5;
/*兼容IE8透明*/
filter: alpha(opacity=50);
}
#navDiv a:hover{
background-color: black;
}
