? 原生JavaScript banner圖輪播 左右切換 圓點點擊切換 js圖片漸變切換 - 慕軻博客-建立自己的個人自媒體博客

心情碎語:等雨停的時候往往雨不會停,等人來的時候往往人不會來。

您的位置:慕軻博客 >特效代碼> 原生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圖片漸變切換

發表評論

16 + 59 =
路人甲 表情
Ctrl+Enter快速提交

網友評論(2)

趣模板源碼網商業源碼分享下載www.qumuban.com
趣模板源碼 4個月前 (10-18) 回復
電商專用快遞網站,空包網,單號網www.danhw.com
wr 4個月前 (10-17) 回復
福彩3d图谜总汇 钱生钱配资 股票每日推荐网 股票涨跌原因解读书籍 大智慧手机炒股可靠吗 大智慧手机炒股软件下载 期货配资注意什么 股权基金配资 股票融资风险 上海股票期货配资公司 k线猎手配资 西安配资 有没有靠谱的股票配资平台 中国三大股票指数 货币基金收益 万科股票分析报告 上海期货配资网