<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
window.onload=function(){
//获取ul标签
var imgList = document.getElementById(‘imglist‘);
//获取所有的图片
var imgArr = document.getElementsByTagName(‘img‘);
//设置ul的宽度
//一个照片520 一共有imgArr.length个
imgList.style.width=520*imgArr.length+‘px‘;
//获取navDiv盒子
var navDiv = document.getElementById(‘navDiv‘);
//获取大盒子
var outer = document.getElementById(‘outer‘);
//让下面的5个暗示盒子居中
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++){
//为每一个超链接增加一个索引函数
allA[i].num=i;
allA[i].onclick=function(){
clearInterval(timer);
//获取点击超链接的索引，并将其设置为index
index=this.num;
// imgList.style.left=-520*index+‘px‘;
// 第一张 0 0
// 第二张 1 -520
// 第二张 2 -1040
setA();
move(imgList,"left",-520*index,20,function(){
autoChange();
});
};
}
autoChange();
function setA(){
//判断当前索引是否是最后一张
if(index >= imgArr.length-1){
// 则将index设为0
index=0;
//此时显示的是最后一张 和第一张一模一样
//通过css将最后一张切换为第一张
imgList.style.left=0;
}
for(var i=0;i<allA.length;i++){
//遍历所有的a,并将他们的背景颜色设置为红色
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>
<script type="text/javascript" src="js/tools.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*
* 设置outer的样式
*/
#outer{
/*
* 设置宽和高
*/
width:520px;
height:500px;
/*
* 居中
* 50px 向下一50px
*/
margin: 50px auto;
background-color: #7FFFD4;
padding: 10px 0;
position: relative;
overflow: hidden;
}
/*
* 设置imglist
*/
#imglist{
/*去除项目符号*/
list-style: none;
position: absolute;
left: -520;
}
/*设置图片中的li*/
#imglist li{
/*设置浮动*/
float: left;
margin: 0 10px;
}
#navDiv{
bottom: 15px;
position: absolute;
}
#navDiv a{
float: left;
width: 15px;
height: 15px;
background: red;
margin: 0 5px;
opacity: 0.5;
filter: alpha(opacity :50);
}
#navDiv a:hover{
background-color: black;
}
</style>
</head>
<body>
<!--创建一个大的div来作为外部的一个大的容器 div#outer tab键-->
<div id="outer">
<!--创建一个ul,用于放置图片-->
<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>
原文：https://www.cnblogs.com/weixin2623670713/p/12731645.html