JavaScript banner轮播 左右切换 圆点点击切换

#banner {

overflow:hidden;

width:100%;

height:400px;

position:relative;float:left;

padding-bottom: 10px;

}

#tab>img:not(:first-child){

display:none;

}

.lunbo_btn {

height: 15px;

width:100%;

margin: 0px auto;

margin-top: -40px;

position: absolute;

z-index: 3;

text-align: center;

}

.lunbo_btn span {

width:14px;

height:14px;

display:inline-block;

background-color:#b4b5b7;

border-radius:50%;

margin:0px 2px;

cursor:pointer;

}

.lunbo_btn span.hover {

background-color:#ffb23c;

}

.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: 25px0 010px;

transform: rotate(45deg);

}

.prve {

left:0;

}

.next {

right:0;

}

.slider_right {

margin: 25px0 05px;

transform: rotate(-135deg);

}

.arrow:hover{background:#444;}

#banner:hover .arrow{display:block;}

//轮播图

var curIndex=0;//初始化

var img_number = document.getElementsByClassName('tabImg').length;var _timer = setInterval(runFn,2000);//2秒

function runFn(){ //运行定时器

curIndex = ++curIndex == img_number ? 0 : curIndex;//算法 4为banner图片数量

slideTo(curIndex);

}//圆点点击切换轮播图

window.onload = function () { //为按钮初始化onclick事件

var tbs = document.getElementsByClassName("tabBtn");for(var i=0;i

tbs[i].οnclick= function() {

clearInterval(_timer);//细节处理，关闭定时，防止点切图和定时器函数冲突

slideTo(this.attributes['num'].value);

curIndex= this.attributes['num'].value

_timer= setInterval(runFn,2000);//点击事件处理完成，继续开启定时轮播

}

}

}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);//点击事件处理完成，继续开启定时轮播

}//切换banner图片 和 按钮样式

functionslideTo(index){

console.log(index)var index = parseInt(index);//转int类型

var images = document.getElementsByClassName('tabImg');for(var i=0;i

if( i ==index ){

images[i].style.display= 'inline';//显示

}else{

images[i].style.display= 'none';//隐藏

}

}var tabBtn = document.getElementsByClassName('tabBtn');for(var j=0;j

if( j ==index ){

tabBtn[j].classList.add("hover"); //添加轮播按钮hover样式

curIndex=j;

}else{

tabBtn[j].classList.remove("hover");//去除轮播按钮hover样式

}

}

}