心情碎语:暂无碎语

您的位置:慕轲博客 >特效代码> 原生JavaScript banner图轮播 左右切换 圆点点击切换 js图片渐变切换

原生JavaScript banner图轮播 左右切换 圆点点击切换 js图片渐变切换

效果如下:


代码如下:
————————————————————————————————————————————————————————————
<!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图片渐变切换

网友评论(2)

趣模板源码网商业源码分享下载www.qumuban.com
趣模板源码 4年前 (2019-10-18) 回复
电商专用快递网站,空包网,单号网www.danhw.com
wr 4年前 (2019-10-17) 回复