实现banner的左右切换按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div,ul,li,a,span,img{
margin:0;
padding:0;
}
#banner {
overflow:hidden;
width:100%;
height:400px;
position:relative;
float:left;
padding-bottom: 10px;
}
#tab>img:not(:first-child){
display:none;
}
.arrow {
display: none;
width: 30px;
height: 60px;
background-color: rgba(0,0,0,0.4);
position: absolute;
top: 50%;
margin-top: -30px;
z-index:999;
}
.arrow span {
display: block;
width: 10px;
height: 10px;
border-bottom: 2px solid #fff;
border-left: 2px solid #fff;
}
.slider_left {
margin: 25px 0 0 10px;
transform: rotate(45deg);
}
.prve {
left: 0;
}
.next {
right: 0;
}
.slider_right {
margin: 25px 0 0 5px;
transform: rotate(-135deg);
}
.arrow:hover{
background:#444;
}
#banner:hover .arrow{
display:block;
}
</style>
</head>
<body>
<div id="banner">
<div id="tab">
<img class="tabImg" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0cf5e958bc88727b50c5c5fba7a8f47a.jpg?w=632&h=340" height="400"/>
<img class="tabImg" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6dd2f3e0de4e6cbba98fd3799cfa5bf7.jpg?w=632&h=340" height="400"/>
<img class="tabImg" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d7d4be1a9e701e16de498f89b1865867.jpg?w=632&h=340" height="400"/>
</div>
<div class="arrow prve">
<span class="slider_left"></span>
</div>
<div class="arrow next">
<span class="slider_right"></span>
</div>
</div>
<script>
var curIndex=0;
var img_number = document.getElementsByClassName('tabImg').length;
var _timer = setInterval(runFn,2000);
function runFn(){
curIndex = ++curIndex == img_number ? 0 : curIndex;
slideTo(curIndex);
}
var prve = document.getElementsByClassName("prve");
prve[0].onclick = function () {
clearInterval(_timer);
curIndex--;
if(curIndex == -1){
curIndex = img_number-1;
}
slideTo(curIndex);
_timer = setInterval(runFn,2000);
}
var next = document.getElementsByClassName("next");
next[0].onclick = function () {
clearInterval(_timer);
curIndex++;
if(curIndex == img_number){
curIndex =0;
}
slideTo(curIndex);
_timer = setInterval(runFn,2000);
}
function slideTo(index){
console.log(index)
var index = parseInt(index);
var images = document.getElementsByClassName('tabImg');
for(var i=0;i<images.length;i++){
if( i == index ){
images[i].style.display = 'inline';
}else{
images[i].style.display = 'none';
}
}
}
</script>
</body>
</html>
