1、效果如下图：
2、源码如下：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>JavaScriptbanner轮播左右切换圆点点击切换</title>
<styletype="text/css">
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;
}
.lunbo_btn{
height:15px;
width:100%;
margin:0pxauto;
margin-top:-40px;
position:absolute;
z-index:3;
text-align:center;
}
.lunbo_btnspan{
width:14px;
height:14px;
display:inline-block;
background-color:#b4b5b7;
border-radius:50%;
margin:0px2px;
cursor:pointer;
}
.lunbo_btnspan.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;
}
.arrowspan{
display:block;
width:10px;
height:10px;
border-bottom:2pxsolid#fff;
border-left:2pxsolid#fff;
}
.slider_left{
margin:25px0010px;
transform:rotate(45deg);
}
.prve{
left:0;
}
.next{
right:0;
}
.slider_right{
margin:25px005px;
transform:rotate(-135deg);
}
.arrow:hover{background:#444;}
#banner:hover.arrow{display:block;}
</style>
</head>
<body>
<divid="banner">
<!--轮播图片-->
<divid="tab">
<imgclass="tabImg"src="images/banner1.jpg"height="400"/>
<imgclass="tabImg"src="images/banner2.jpg"height="400"/>
<imgclass="tabImg"src="images/banner3.jpg"height="400"/>
<imgclass="tabImg"src="images/banner4.jpg"height="400"/>
</div>
<!--指示符-->
<divclass="lunbo_btn">
<spannum="0"class="tabBtnhover"></span>
<spannum="1"class="tabBtn"></span>
<spannum="2"class="tabBtn"></span>
<spannum="3"class="tabBtn"></span>
</div>
<!--左右切换按钮-->
<divclass="arrowprve">
<spanclass="slider_left"></span>
</div>
<divclass="arrownext">
<spanclass="slider_right"></span>
</div>
</div>
<scripttype="text/javascript">
//轮播图
varcurIndex=0;//初始化
varimg_number=document.getElementsByClassName('tabImg').length;
var_timer=setInterval(runFn,2000);//2秒
functionrunFn(){//运行定时器
curIndex=++curIndex==img_number?0:curIndex;//算法4为banner图片数量
slideTo(curIndex);
}
//圆点点击切换轮播图
window.onload=function(){//为按钮初始化onclick事件
vartbs=document.getElementsByClassName("tabBtn");
for(vari=0;i<tbs.length;i++){
tbs[i].onclick=function(){
clearInterval(_timer);//细节处理，关闭定时，防止点切图和定时器函数冲突
slideTo(this.attributes['num'].value);
curIndex=this.attributes['num'].value
_timer=setInterval(runFn,2000);//点击事件处理完成，继续开启定时轮播
}
}
}
varprve=document.getElementsByClassName("prve");
prve[0].onclick=function(){//上一张
clearInterval(_timer);//细节处理，关闭定时，防止点切图和定时器函数冲突
curIndex--;
if(curIndex==-1){
curIndex=img_number-1;
}
slideTo(curIndex);
_timer=setInterval(runFn,2000);//点击事件处理完成，继续开启定时轮播
}
varnext=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)
varindex=parseInt(index);//转int类型
varimages=document.getElementsByClassName('tabImg');
for(vari=0;i<images.length;i++){//遍历每个图片
if(i==index){
images[i].style.display='inline';//显示
}else{
images[i].style.display='none';//隐藏
}
}
vartabBtn=document.getElementsByClassName('tabBtn');
for(varj=0;j<tabBtn.length;j++){//遍历每个按钮
if(j==index){
tabBtn[j].classList.add("hover");//添加轮播按钮hover样式
curIndex=j;
}else{
tabBtn[j].classList.remove("hover");//去除轮播按钮hover样式
}
}
}
</script>
</body>
</html>
完毕！
goodjob!goodluck!
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h56491.shtml
