代码如下：
————————————————————————————————————————————————————————————
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript banner轮播 左右切换 圆点点击切换</title>
<style type="text/css">
*{margin:0;padding:0;}
#banner{overflow:hidden;width:100%;height:auto;position:relative;float:left;margin-bottom:10px;background:#333;}
#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:rgba(10,10,10,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:rgba(10,10,10,0.8);}
#banner:hover .arrow{display:block;}
</style>
</head>
<body>
<div id="banner">
<!-- 轮播图片 -->
<div id="tab">
<img class="tabImg" src="images/banner1.jpg" width="100%"/>
<img class="tabImg" src="images/banner2.jpg" width="100%"/>
<img class="tabImg" src="images/banner3.jpg" width="100%"/>
<img class="tabImg" src="images/banner4.jpg" width="100%"/>
</div>
<!-- 指示符 -->
<div class="lunbo_btn">
<span num="0" class="tabBtn hover"></span>
<span num="1" class="tabBtn"></span>
<span num="2" class="tabBtn"></span>
<span num="3" class="tabBtn"></span>
</div>
<!-- 左右切换按钮 -->
<div class="arrow prve">
<span class="slider_left"></span>
</div>
<div class="arrow next">
<span class="slider_right"></span>
</div>
</div>
<script type="text/javascript">
//轮播图
var curIndex=0;//初始化
var key=0;//控制切换变量
var alpha=0;
var img_number = document.getElementsByClassName('tabImg').length;
var _timer = setInterval(runFn,10);//4秒，10为更新频率，与判断语句中的400共同控制更新时间4秒
function runFn(){ //运行定时器
if(key>400){//400*10=4000 毫秒 = 4 秒，与上面的更新频率结合控制时间
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.length;i++){
tbs[i].onclick = function () {
clearInterval(_timer);//细节处理，关闭定时，防止点切图和定时器函数冲突
key=0;
slideTo(this.attributes['num'].value);
curIndex = this.attributes['num'].value
_timer = setInterval(runFn,10);//点击事件处理完成，继续开启定时轮播
}
}
}
var prve = document.getElementsByClassName("prve");
prve[0].onclick = function () {//上一张
clearInterval(_timer);//细节处理，关闭定时，防止点切图和定时器函数冲突
curIndex--;
key=0;
if(curIndex == -1){
curIndex = img_number-1;
}
slideTo(curIndex);
_timer = setInterval(runFn,10);//点击事件处理完成，继续开启定时轮播
}
var next = document.getElementsByClassName("next");
next[0].onclick = function () {//下一张
clearInterval(_timer);//细节处理，关闭定时，防止点切图和定时器函数冲突
curIndex++;
key=0;
if(curIndex == img_number){
curIndex =0;
}
slideTo(curIndex);
_timer = setInterval(runFn,10);//点击事件处理完成，继续开启定时轮播
}
//切换banner图片 和 按钮样式
function slideTo(index){
var index = parseInt(index);//转int类型
var images = document.getElementsByClassName('tabImg');
if(key>350){hidepic(images,curIndex);}
for(var i=0;i<images.length;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<tabBtn.length;j++){//遍历每个按钮
if( j == index ){
tabBtn[j].classList.add("hover"); //添加轮播按钮hover样式
curIndex=j;
}else{
tabBtn[j].classList.remove("hover");//去除轮播按钮hover样式
}
}
if(key<50){showpic(images,index);}
if(key>400){key=0;}else{key++;}//400*10=4000 毫秒 = 4 秒，与上面的更新频率结合控制时间
}
function showpic(imgarr,index2){//下一张图片透明度逐渐显示
imgarr[index2].style.opacity= alpha / 100;
imgarr[index2].style.filter = 'alpha(opacity='+alpha+')';
if(alpha < 100){alpha = alpha + 2;}
//console.log(alpha);
}
function hidepic(imgarr,index2){//上一张图片透明度逐渐隐藏
imgarr[index2].style.opacity= alpha / 100;
imgarr[index2].style.filter = 'alpha(opacity='+alpha+')';
if(alpha > 0){alpha = alpha - 2;}
//console.log(alpha);
}
</script>
</body>
</html>
---
转载请注明本文标题和链接：《原生JavaScript banner图轮播 左右切换 圆点点击切换 js图片渐变切换》
