JavaScript利用display属性做轮播图，代码及其简单！！！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,div,img,ul,li{
margin: 0px;
padding: 0px;
}
div{
width: 500px;
height: 300px;
margin: 100px auto;
position: relative;
}
div img{
height: 300px;
width: 500px;
position: absolute;
display：none;
}
div img:nth-child(1){
display: block;
}
ul li{
list-style: none;
height: 15px;
width: 15px;
background:gray;
border-radius: 50%;
float: left;
position: relative;
z-index: 1;
top: 260px;
left: 35%;
margin:5px;
}
ul li:nth-child(1){
background: red;
}
.left{
width: 30px;
height: 50px;
background: rgba(0,0,0,0.5);
text-align: center;
font-size: 26px;
color: white;
line-height: 50px;
position: absolute;
top:130px;
left: 0px;
border: 0;
outline: none;
}
.right{
width: 30px;
height: 50px;
background: rgba(0,0,0,0.5);
text-align: center;
font-size: 26px;
color: white;
line-height: 50px;
position: absolute;
top:130px;
right: 0px;
border: 0;
outline: none;
}
</style>
</head>
<body>
<div id="box">
<img class="img" src="img/1.jpg">
<img class="img" src="img/2.jpg">
<img class="img" src="img/3.jpg">
<img class="img" src="img/4.jpg">
<img class="img" src="img/5.jpg">
<img class="img" src="img/6.jpg">
<ul>
<li class="dot"></li>
<li class="dot"></li>
<li class="dot"></li>
<li class="dot"></li>
<li class="dot"></li>
<li class="dot"></li>
</ul>
<button class="left" οnclick="left()"><</button>
<button class="right" οnclick="ChangeImg()">></button>
</div>
<script>
//思路：
//1.图片每隔一定时间切换一次
//2.点击右侧按钮，升序切换图片
//3.点击左侧按钮，降序切换图片
//4.鼠标移上，轮播暂停
//5.鼠标移开，轮播继续
var index = 0;
var list = 0;
var a = document.getElementsByClassName("img");//取所有img标签
var b = document.getElementsByClassName("dot");//取所有li标签
var div = document.getElementById("box");//取div(大盒子)标签
console.log(a);
console.log(b);
//自动轮播事件和鼠标点击右侧事件
function ChangeImg(){
index++;
list++;
if(index >= a.length){
index = 0;//当index大于或者等于img长度时，index为0
}
for(var i = 0;i < a.length;i++){//遍历所有img
a[i].style.display = 'none';//把所有img样式设置为none
}
a[index].style.display = 'block';//把下标为index的img标签样式设置为block
if(list >= b.length){
list = 0;//当list大于或者等于img长度时，list为0
}
for(var j = 0;j < b.length;j++){//遍历所有li
b[j].style.background = 'gray';//把所有li标签样式设置为白色
}
b[list].style.background = 'red';//把下标为list的li标签设置为red
}
//鼠标点击左侧事件
function left(){
index--;
list--;
if(index < 0){
index = a.length-1;//当index小于0时，index为img标签的长度减一
}
for(var i = 0;i < a.length;i++){
a[i].style.display = "none";
}
a[index].style.display = "block";
if(list < 0){
list = b.length-1;//当list小于0时，list为li标签的长度减一
}
for(var j = 0;j < b.length;j++){
b[j].style.background = 'gray';
}
b[list].style.background = 'red';
}
//定时器
var timer = setInterval(ChangeImg,2000);
div.onmouseover = function(){//定义鼠标移入事件，当鼠标移入div区域，轮播暂停
clearInterval(timer);
}
div.onmouseleave = function(){//定义鼠标移出事件，当鼠标移出div区域，轮播继续
timer = setInterval(ChangeImg,2000);
}
</script>
</body>
</html>
鼠标右击事件和自动轮播都是升序，所有写在一起，而鼠标左击事件是降序，稍微修改一下就可以，并不是很复杂。
效果图如下：
2807
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
