<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
ul, ol { list-style: none;}
a {border: none;text-decoration: none;color: inherit;}
* {margin: 0;padding: 0;}
.banner{
position: relative;
width: 800px;
height: 450px;
margin: 100px auto;
box-shadow: 0 0 10px 0 #000;
}
.banner .pic a img{
position: absolute;
left: 0;
top: 0;
width: 800px;
height: 450px;
opacity: 0;
transition: 0.5s;
}
.banner .pic a img.on{
opacity: 1;
}
.banner .btn p{
position: absolute;
top: calc(50% - 27px);
width: 55px;
height: 55px;
cursor: pointer;
}
.banner .btn p:hover{
opacity: 0.7;
}
.banner .btn p:nth-child(1){
left: 10px;
background: url("images/btnL.png");
}
.banner .btn p:nth-child(2){
right: 10px;
background: url("images/btnR.png");
}
.banner ol{
position: absolute;
bottom: 10px;
left: calc(50% - 100px);
}
.banner ol li{
float: left;
width: 30px;
height: 30px;
font: bold 20px/30px "";
color: #fff;
text-align: center;
background: #ccc;
margin: 0 5px;
border-radius: 50%;
cursor: pointer;
}
.banner ol li.on{
background: orangered;
}
</style>
<title>Document</title>
</head>
<body>
<div class="banner">
<div class="pic">
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="images/0.jpg" alt="" class="on"></a>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="images/1.jpg" alt=""></a>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="images/2.jpg" alt=""></a>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="images/3.jpg" alt=""></a>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="images/4.jpg" alt=""></a>
</div>
<div class="btn">
<p></p>
<p></p>
</div>
<ol class="dot">
<li class="on">0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
<script>
var aBtn = document.querySelectorAll(".banner .btn p");
var aImg = document.querySelectorAll(".banner .pic img");
var aDot = document.querySelectorAll(".banner .dot li");
var length = aImg.length;
var idx = 0; //索引
/*给按钮添加点击事件*/
aBtn[1].onclick = function () {
aImg[idx].className = "";
idx++;
if(idx > length-1) idx = 0;
aImg[idx].className = "on";
change(idx);
}
aBtn[0].onclick = function () {
aImg[idx].className = "";
idx--;
if(idx < 0) idx = length - 1;
aImg[idx].className = "on";
change(idx);
}
/*给小圆点注册点击事件*/
for( var i=0; i<length; i++ ){
(function (m) {
aDot[m].onclick = function () {
aImg[idx].className = "";
idx = m;
aImg[idx].className = "on";
change(idx);
}
})(i);
}
/*将变化的封装到函数里面*/
function change(index) {
for( var i=0; i<length; i++ ){
aDot[i].className = "";
}
aDot[index].className = "on";
}
</script>
</body>
</html>