1.核心思路
其实就是利用css样式中display的隐藏和显示属性，首先让设置第一张图片的类名设置为current，display属性设置为block，只会显示第一张图片；然后将剩下的图片类名设置为pic，display属性设置为none。这样在前端页面中，只会显示第一张图片，其他图片就会被隐藏。在js中利用定时器和循环，判断每次调用定时器的下标值和当前循环变量是否相等，如果相等，那么就将这个图片的class类名变成current，其他图片设置为pic即可
2.html页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="banner">
<ul class="banner_pic" id="banner_pic">
<li class="current"><img src="images/1.jpg" alt=""></li>
<li class="pic"><img src="images/2.jpg" alt=""></li>
<li class="pic"><img src="images/3.jpg" alt=""></li>
<li class="pic"><img src="images/4.jpg" alt=""></li>
<li class="pic"><img src="images/5.jpg" alt=""></li>
</ul>
</div>
<script>
var currentIndex=0
var list=document.getElementById("banner_pic").getElementsByTagName("li")
function autoChange(){
//每次调用时，首先将currentIndex值加1
++currentIndex
//如果加加值等于标签长度了，就说明图片已经遍历完了，再重0开始
if(currentIndex==list.length){
currentIndex=0
}
//每次调用函数时，就会进行遍历，如果判断当前循环i的大小等于index，那么
for(var i=0;i<list.length;i++){
if(i==currentIndex){
list[i].className="current"
}else{
list[i].className="pic"
}
}
}
//使用定时器，每隔三秒就调用一下轮播图函数
setInterval(autoChange,3000)
</script>
</body>
</html>
3.css样式
*{
padding: 0;
margin: 0;
list-style: none;
}
//让图片居中
.banner{
width: 980px;
height: 480px;
margin: 0 auto;
}
.banner_pic li img{
width: 980px;
height: 480px;
}
/*将第一张图片进行展示*/
.banner_pic .current{
display: block;
}
/*将除第一张图片进行展示*/
.banner_pic .pic{
display: none;
}