<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 清除默认样式 */
*{
margin: 0;
padding: 0;
}
/* 去掉每个li前面的大黑点 */
ul{
list-style: none;
}
/* 设置最外层的盒子 */
#wrapper{
830px;
height: 432px;
/*上边为100px 左右居中 */
margin: 100px auto;
/* 相对定位 */
position: relative;
}
.img li{
/* 绝对定位 */
position: absolute;
left: 0;
right: 0;
/* 透明度 */
opacity: 0;
}
.img li.active{
opacity: 1;
}
/* 设置按钮 */
.leftBtn,.rightBtn{
30px;
height: 60px;
position: absolute;
top: 50%;
margin-top: -30px;
/* 背景颜色 */
background-color: antiquewhite;
/* 水平居中 */
text-align: center;
/* 垂直居中 */
line-height: 60px;
/* 鼠标放上去可点击 */
cursor: pointer;
}
/* 左边按钮 */
.leftBtn{
left: 0;
}
/* 右边按钮 */
.rightBtn{
right: 0;
}
/* 轮播指标 */
.circle{
100%;
position: absolute;
bottom: 20px;
text-align: center;
z-index: 10;
}
.circle span{
display: inline-block;
20px;
height: 20px;
border-radius: 50%;
/* 小圆点背景 */
background-color: #fff;
}
.circle span.active{
background-color: black;
}
</style>
</head>
<body>
<div id="wrapper">
<ul class="img">
<li class="active"><a href="#"><img src="images/01.png" alt=""></a></li>
<li><a href="#"><img src="images/02.png" alt=""></a></li>
<li><a href="#"><img src="images/03.png" alt=""></a></li>
</ul>
<div class="leftBtn"><</div>
<div class="rightBtn">></div>
<div class="circle">
<span class="active"></span>
<span></span>
<span></span>
</div>
</div>
<script>
var wrapper = document.querySelector("#wrapper");
var lis = document.querySelectorAll(".img li");
var spans = document.querySelectorAll(".circle span")
var leftBtn = document.querySelector(".leftBtn");
var rightBtn = document.querySelector(".rightBtn");
// 上一次选中的索引
var cn = 0;
// 当前次选中的索引
var ln = 0;
for(var i = 0;i <spans.length;i++){
// 标记当前的i
spans[i].index = i;
spans[i].onclick = function(){
cn = this.index;
}
}
// 轮播函数
function change(){
lis[ln].className = spans[ln].className = "";
lis[cn].className = spans[cn].className = "active";
ln = cn;
}
// 左边按钮绑定的事件
leftBtn.onclick = function(){
cn--;
if(cn < 0){
cn = lis.length-1;
}
change();
}
// 右边按钮绑定的事件
rightBtn.onclick = function(){
cn++;
if(cn > lis.length-1){
cn = 0;
}
change();
}
// 定时器
var timer = setInterval(rightBtn.onclick,2000);
// 当鼠标滑进最外层的大盒子里
wrapper.onmouseover = function(){
// 使按钮显示出来
leftBtn.style.display = rightBtn.style.display = "block";
// 清除定时器
clearInterval(timer);
}
// 当鼠标滑出最外层的大盒子里
wrapper.onmouseout = function(){
// 使按钮隐藏
leftBtn.style.display = rightBtn.style.display = "none";
// 开始轮播
timer = setInterval(rightBtn.onclick,2000);
}
</script>
</body>
</html>
