套路都比较简单,复习下原生知识
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<section class="bannersection">
<div id="wrap">
<div class="banner">
<div class="banner-img">
<img src="" width="1200px" height="400px" alt="lunbotu1">
</div>
</div>
<div class="banner">
<div class="banner-img">
<img src="" width="1200px" height="400px" alt="lunbotu2">
</div>
</div>
<div class="banner">
<div class="banner-img">
<img src="" width="1200px" height="400px" alt="lunbotu3">
</div>
</div>
<div class="banner">
<div class="banner-img">
<img src="" width="1200px" height="400px" alt="lunbotu4">
</div>
</div>
<div class="banner">
<div class="banner-img">
<img src="" width="1200px" height="400px" alt="lunbotu5">
</div>
</div>
<div class="tab">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="prev"></div>
<div class="next"></div>
</div>
</section>
</body>
</html>复制代码
css
* {
margin: 0px;
padding: 0;
}
#wrap {
position: relative;
margin: 50px auto;
width: 1200px;
height: 400px;
}
#wrap .banner {
position: absolute;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
}
#wrap .tab {
position: relative;
bottom: 10px;
right: 10px;
}
#wrap .tab span {
display: inline-block;
width: 6px;
height: 6px;
margin: 3px;
background: rgba(105, 105, 105, 0.5);
border-radius: 50%;
cursor: pointer;
border: 2px solid #887B6E;
}
#wrap .tab span.on { //动态添加类 on
background: #E2CEB7;
}
#wrap .tab span:hover {
background: #E2CEB7;
}
#wrap .prev {
position: absolute;
left: 20px;
top: 210px;
width: 41px;
height: 69px;
background: 82px;
cursor: pointer;
}
#wrap .prev:hover {
background: #887B6E;
}
#wrap .next {
position: absolute;
right: 20px;
top: 210px;
width: 41px;
height: 69px;
background: #ffffff;
cursor: pointer;
}
#wrap .next:hover {
background: #887B6E;
}复制代码
js
var oBody = document.getElementsByTagName("body")[0];
var aBanner = document.getElementsByClassName("banner");
var aSpan = document.getElementsByClassName("tab")[0].getElementsByTagName("span");
var oNext = document.getElementsByClassName("next")[0];
var oPrev = document.getElementsByClassName("prev")[0];
aBanner.style.opacity = 1;
aSpan[0].className = "on";
var num = 0;
for (var i = 0; i < aSpan.length; i++) {
aSpan[i].index = i;
aSpan[i].onclick = function () {
for (var j = 0; j < aSpan.length; j++) {
num = this.index;
aSpan[j].className = "";
aBanner[j].style.opacity = "0";
}
aSpan[num].className = "on"; //选中的目标动态添加类 on
aBanner[num].style.opacity = "1";
}
oNext.onclick = function () {
for (var j = 0; j < aSpan.length; j++) {
if (aSpan[j].className == "on") {
aSpan[j].className = "";
aBanner[j].style.opacity = "0";
j++;
num++;
if (j > 4) {
j = 0
}
aSpan[j].className = "on";
aBanner[j].style.opacity = "1"
}
}
}
oPrev.onclick = function () {
for (var j = 0; j < aSpan.length; j++) {
if (aSpan[j].className == "on") {
aSpan[j].className = "";
aBanner[j].style.opacity = "0";
j--;
if (j < 0) {
j = 4;
}
aSpan[j].className = "on";
aBanner[j].style.opacity = "1"
}
}
}
}
function Time() {
num++;
if (num < 5) {
for (var j = 0; j < aSpan.length; j++) {
aSpan[j].className = "";
aBanner[j].style.opacity = "0";
}
aSpan[num].className = "on"
aSpan[num].style.opacity = 1
} else {
num = -1
}
}
clearInterval(timer)
var timer = setInterval(Time(), 2000)
oBody.onmouseover = function () { //鼠标在不许动
clearInterval(timer)
}
oBody.onmouseout = function () { //鼠标离开动
clearInterval(timer)
timer = setInterval(Timer(), 200)
}复制代码