<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 轮播图 </title>
<style>
*{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
}
div{
width:1226px;
height:460px;
position:relative;
border:1px solid #ccc;
margin:0 auto;
}
img{
width:1226px;
height:460px;
display:none;
}
img.active{display:block;}
.prev,.next{
position:absolute;
top:200px;
font-size:40px;
color:white;
width:40px;
height:70px;
text-align:center;
line-height:70px;
}
.prev{left:0px;}
.next{right:0px;}
.prev:hover,.next:hover{backgroud-color:rgba(0,0,0,0.6);
}
ul{
position:absolute;
bottom:20px;
right:20px;
}
ul li{
width:6px;
height:6px;
background-color:rgba(0,0,0,0.4);
border-radius:50%;
margin-right:10px;
display:inline-block;
}
ul::after{
content:"";
display:block;
clear:both;
}
li.active{background-color:white;}
</style>
</head>
<body>
<div id="box">
<img class="active" src="1.png">
<img src="2.png">
<img src="3.png">
<img src="4.png">
<img src="5.png">
<p class="prev"><</p>
<p class="next">></p>
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
/*
1、点击小圆点切换对应的图片
2、点击左右箭头切换
3、主动轮播
*/
var imgs=document.getElementsByTagName('img');
var lis=document.getElementsByTagName('li');
var prev=document.getElementsByClassName('prev')[0];
var next=document.getElementsByClassName('next')[0];
var index = 0;
// 小圆点的点击事件,点击的时候图片发生变化
for(var i=0;i<lis.length;i++){lis[i] = index;// 存下标
lis[i].onclick = fucntion(){for(var j=0;j<imgs.length;j++){imgs[index].className = '';
imgs[j].className = '';
lis[j].className = '';
}
imgs[this.index].className = 'active';
this.className = 'active';
index = this.index;
}
}
// 指向上一张的按钮被点击时
prev.onclick = function(){lis[index].className = '';
imgs[index].className = '';
index--;
if(index<0){index = lis.length-1;// 让它等于最大的下标}
lis[index].className = 'active';
imgs[index].className = 'active';
}
// 指向下一张的按钮被点击时
next.onclick = function(){lis[index].className = '';
imgs[index].className = '';
index++;
if(index == lis.length){index = 0;}
lis[index].className = 'acitve';
imgs[index].className = 'active';
}
var timer;
box.onmouseenter = function(){clearInterval(timer);// 鼠标一进去,进行轮播
}
box.onmouseleave = function(){set();// 鼠标进去,继续执行 set();}
function set(){timer = setInterval(fucntion(){lis[index].className = '';
imgs[index].className = '';
index++;
if(index == lis.length){index = 0;}
lis[index].className = 'active';
imgs[index].classNmae = 'active';
},2000);
}
set();
</script>
</body>
</html>