JS實(shí)現(xiàn)輪播圖思路整理

Meathill 發(fā)布于2019-08-21 14:16 / 2300人閱讀

摘要：結(jié)構(gòu)層表現(xiàn)層實(shí)現(xiàn)原理通過改變圖片的偏移量來實(shí)現(xiàn)圖片的切換實(shí)現(xiàn)步驟通過獲取頁面需要操作的元素獲取輪播圖父容器獲取圖片列表獲取圖片切換圓點(diǎn)按鈕獲取向左切換箭頭獲取向右切換箭頭實(shí)現(xiàn)左

html結(jié)構(gòu)層

css表現(xiàn)層

.index-banner  {
    position: relative; 
    width:1610px;
    height: 461px;
    margin:0 auto; 
    overflow: hidden; 
}
.index-banner .banner-list{
    position: absolute;
    width:8050px; 
    height: 461px;
    z-index: 1;  
}
.index-banner .banner-list a{ 
    display: block; 
    float: left;
    width:1610px;
    height:461px; 
}
.banner1{  
    background: url("../images/banner1.jpg") no-repeat; 
} 
.banner2{  
    background: url("../images/banner2.jpg") no-repeat; 
} 
.banner3{  
    background: url("../images/banner3.jpg") no-repeat; 
}
.index-banner .slide{
    position: absolute;
    z-index: 2; 
    left:50%;
    margin-left:-5px;
    bottom: 20px;
}
.index-banner .slide span{
    display: inline-block;
    cursor: pointer;
    margin-right: 10px; 
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
}
.index-banner .slide .active{
    background-color: #000;
}
.arrow { 
    cursor: pointer; 
    position: absolute;
    z-index: 2; 
    top: 180px; 
    display: none; 
    line-height: 70px; 
    text-align: center; 
    vertical-align: middle;
    font-size: 35px; 
    font-weight: bold; 
    width: 50px; 
    height: 70px;  
    background-color: RGBA(0,0,0,.3); 
    color: #fff;
}
.arrow:hover { background-color: RGBA(0,0,0,.7);}
.index-banner:hover .arrow { display: block;}
 #prev { left: 20px;}
 #next { right: 20px;}

JS實(shí)現(xiàn)原理：通過改變圖片的偏移量來實(shí)現(xiàn)圖片的切換
實(shí)現(xiàn)步驟：1、通過documnet.getElementById()獲取頁面需要操作的元素

window.onload=function(){

var banner=document.getElementById("banner");//獲取輪播圖父容器；
var list=document.getElementById("banner_list");//獲取圖片列表；
var buttons=document.getElementById("slideBtn").getElementsByTagName("span");//獲取圖片切換圓點(diǎn)按鈕；
var pre=document.getElementById("prev");//獲取向左切換箭頭
var next=document.getElementById("next");//獲取向右切換箭頭；

2、實(shí)現(xiàn)左右箭頭的切換：給左右箭頭綁定點(diǎn)擊事件；
問題：在左右切換過程中會在圖片切換完會顯示空白？
解決方法：使用無限滾動的技巧，即實(shí)現(xiàn)循環(huán)無縫切換：
1)在頁面圖片列表的開始加上最后一張圖片的附屬圖，在最后加上第一張圖片的附屬圖
2)每次切換時判斷切換后的位置是否大于-1610px或是小于-4830px（即是否切換到附屬圖的位置）：
如果大于-1610px,就把圖片重新定位到真正的最后一張圖的位置：-4830px;
如果小于-4830px,就把圖片重新定位到真正的第一張圖的位置：-1610px;

var index=1;//用于存放當(dāng)前要顯示的圖片，初始值為第一張圖片
var animated=false;//優(yōu)化動畫執(zhí)行效果，只有當(dāng)前切換動畫未執(zhí)行時，才能被執(zhí)行。解決當(dāng)前動畫執(zhí)行未完成時，多次點(diǎn)擊切換按鈕導(dǎo)致的頁面卡圖現(xiàn)象，初始值為false

pre.onclick=function(){
        //切換到當(dāng)前圖片左邊的圖片，如果當(dāng)前是第一張，會切換到最后一張
        if(index==1){
            index=3;
        }
        //否則會切換到前一張，即index-1
        else{
            index-=1;    
        }
        //每次點(diǎn)擊時，判斷animated為false時執(zhí)行切換
        if(!animated){
            animate(1610);    
        }
        
        //設(shè)置當(dāng)前圓點(diǎn)按鈕樣式切換到選中狀態(tài)，其他圓點(diǎn)為未選中狀態(tài)
        showBtn();
    }
next.onclick=function(){
        //切換到當(dāng)前圖片右邊的圖片，如果當(dāng)前是最后一張，會切換到第一張
        if(index==3){
            index=1;
        }
        //否則會切換到下一張，即index+1
        else{
            index+=1;    
        }
        //每次點(diǎn)擊時，判斷animated為false時執(zhí)行動畫
        if(!animated){
            animate(-1610);    
        }
        //設(shè)置當(dāng)前圓點(diǎn)按鈕樣式切換到選中狀態(tài)，其他圓點(diǎn)為未選中狀態(tài)
        showBtn();
    }
    
    
//將偏移的動作封裝到函數(shù)animate()中
function animate(offset){ 
    animated=true;//調(diào)用animate()切換時設(shè)置為true;
    var newleft=parseInt(list.style.left)+offset;//偏移之后的位置
    var time=500;//位移總時間
    var interval=10;//位移間隔時間
    var speed=offset/(time/interval);//每次位移量 =總偏移量/次數(shù)

function go(){//遞歸，在函數(shù)內(nèi)部調(diào)用自身實(shí)現(xiàn)入場圖片500ms淡入的效果            
   //判斷偏移量是否達(dá)到了目標(biāo)值，如果沒有，在原來的基礎(chǔ)上繼續(xù)移動
        if((speed<0 && parseInt(list.style.left)>newleft)||(speed>0 && parseInt(list.style.left) -1610 ){
                list.style.left="-4830px";
            }
            if( newleft < -4830){
                list.style.left="-1610px";
            }
        }
    } 
    go();//調(diào)用animate()時執(zhí)行g(shù)o()函數(shù) 

}

//將圓點(diǎn)按鈕樣式切換封裝到showBtn()函數(shù)中
    function showBtn(){
        //遍歷圓點(diǎn)按鈕數(shù)組
        for(var i=0;i
3、實(shí)現(xiàn)圓點(diǎn)按鈕點(diǎn)擊切換：遍歷底部圓點(diǎn)按鈕數(shù)組，為每個按鈕添加點(diǎn)擊事件
for(var i=0;i
4、實(shí)現(xiàn)圖片自動切換：實(shí)現(xiàn)每5s切換圖片，圖片循環(huán)播放；
 var timer;//設(shè)置自動播放的定時器
    function play(){
            //設(shè)置定時器，每隔5s點(diǎn)擊右鍵頭切換按鈕
            timer=setInterval(function(){ 
                next.onclick(); 
            },5000);
        }
        function stop(){
            //暫停自動播放
            clearInterval(timer);
        }
    
        banner.onmouseover=stop;//鼠標(biāo)懸停某張圖片，則暫停切換；
        banner.onmouseout=play;//鼠標(biāo)移除時，繼續(xù)自動切換；
    
        play();//初始化時執(zhí)行自動播放
        
    }//window.onload加載完成
    

使用jquery實(shí)現(xiàn)如下，思路不變：
 $(function () {
            var banner= $("#banner");
            var list = $("#banner_list");
            var buttons = $("#slideBtn span");
            var prev = $("#prev");
            var next = $("#next");
            var index = 1; 
            var interval = 5000;
            var timer;


            function animate (offset) {
                var left = parseInt(list.css("left")) + offset;
                if (offset>0) {
                    offset = "+=" + offset;
                }
                else {
                    offset = "-=" + Math.abs(offset);
                }
                list.animate({"left": offset}, 500, function () {
                    if(left > -1610){
                        list.css("left",-4830);
                    }
                    if(left < 4830) {
                        list.css("left",-1610);
                    }
                });
            }

            function showButton() {
                buttons.eq(index-1).addClass("active").siblings().removeClass("active");
            }

            function play() {
                timer = setTimeout(function () {
                    next.trigger("click");
                    play();
                }, interval);
            }
            function stop() {
                clearTimeout(timer);
            }

            next.bind("click", function () {
                if (list.is(":animated")) {
                    return;
                }
                if (index == 3) {
                    index = 1;
                }
                else {
                    index += 1;
                }
                animate(-1610);
                showButton();
            });

            prev.bind("click", function () {
                if (list.is(":animated")) {
                    return;
                }
                if (index == 1) {
                    index = 3;
                }
                else {
                    index -= 1;
                }
                animate(1610);
                showButton();
            });

            buttons.each(function () {
                 $(this).bind("click", function () {
                     if (list.is(":animated") || $(this).attr("class")=="active") {
                         return;
                     }
                     var myIndex = parseInt($(this).attr("index"));
                     var offset = -1610 * (myIndex - index);

                     animate(offset);
                     index = myIndex;
                     showButton();
                 })
            });

            banner.hover(stop, play);

            play();

        });