Javascript realizes a carousel chart countdown and automatic page turning
html and js code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="css/banner2.css" rel="stylesheet"/>
<script>
window.addEventListener("load",function(){
var banner = document.querySelector('.banner');
var btn = document.querySelector(".btn");
var left = document.querySelector(".left");
var right = document.querySelector(".right");
var ul = document.querySelector('ul');
var ol = document.querySelector('.circle');
var bannerWidth = banner.offsetWidth;
banner.addEventListener("mouseenter",function(){
btn.style.visibility='visible';
clearInterval(time);
});
banner.addEventListener('mouseleave',function(){
btn.style.visibility='hidden'
time = setInterval(function(){
right.click();
},2000);
});
for (var j = 0; j < ul.children.length; j++) {
var li = document.createElement("li");
li.setAttribute('index', j);
ol.appendChild(li);
li.addEventListener('click',function(){
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
this.className = 'current';
var index = this.getAttribute('index');
num = index;
ul.style.left = -num*bannerWidth+'px';
});
}
var num = 0;
var rCount = 0;
var rightC = document.querySelector(".rightCount")
right.addEventListener('click',function(){
rCount+=1;
rightC.innerText = "点击了"+rCount +'次';
if(num == ul.children.length-1){
num = 0;
ul.style.left = 0;
changeCircle();
return
}
num++;
ul.style.left = -num*bannerWidth+'px';
changeCircle();
});
left.addEventListener('click',function(){
if(num == 0){
num = ul.children.length-1;
ul.style.left = -num*bannerWidth+'px';
changeCircle();
return
}
num--;
ul.style.left = -num*bannerWidth+'px';
changeCircle();
})
function changeCircle(){
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[num].className = 'current';
}
ol.children[0].className = 'current';
var t2 = 2;
var timing = document.querySelector(".timing");
var tt = setInterval(function(){
t2 -= 0.1;
timing.innerText= t2.toFixed(1)+'秒';
if(t2 <= 0){
t2 = 2;
}
},100);
var time = setInterval(function(){
right.click();
},2000)
});
</script>
</head>
<body>
<div class="banner">
<div class="rightCount">右边点击了</div>
<div class="timing">2.0 秒</div>
<div class="btn">
<div class="left"><img src="img/left.png"></div>
<div class="right"><img src="img/right.png"></div>
</div>
<ul>
<li class="pic"><img src="img/1.jpg"></li>
<li class="pic"><img src="img/2.jpg"></li>
<li class="pic"><img src="img/3.jpg"></li>
<li class="pic"><img src="img/4.jpg"></li>
</ul>
<ol class="circle">
</ol>
</div>
</body>
</html>
css code
* {
margin: 0;
padding: 0;
}
ul,li, ol, a {
list-style: none;
text-decoration: none;
}
.banner {
width: 428px;
height: 300;
margin: 20px auto;
overflow: hidden;
position: relative;
}
.pic {
width: 428px;
}
.btn{
width: 400px;
height: 80px;
position: absolute;
top: 110px;
z-index: 5;
}
.left .right{
z-index: 2;
}
.left{
float: left;
}
.right{
float: right;
}
ul{
position: relative;
width: 500%;
}
li{
float: left;
}
ol{
position: absolute;
bottom: 10px;
left: 50%;
}
ol li{
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid #FFFFEE;
cursor: pointer;
}
.current{
background-color: #FFFFEE;
}
.timing{
position: absolute;
z-index: 4;
left: 10px;
top: 30px;
color: #EEEEEE;
}