JS實(shí)現(xiàn)自動(dòng)輪播圖效果

現(xiàn)在很多網(wǎng)站都有輪播圖，這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)輪播圖的完整代碼及原理，需要的小伙伴可以參考一下。
輪播圖主要功能：
1、 圖片自動(dòng)輪播（主圖切換同時(shí)下面導(dǎo)航圖片也會(huì)跟著變化）
2、 鼠標(biāo)懸停的時(shí)候，圖片輪播停止，鼠標(biāo)離開(kāi)后繼續(xù)
3、 單擊左右按鈕切換圖片
4、 鼠標(biāo)移入后左右按鈕出現(xiàn)，移出消失
工作原理：
具體效果如下：



輪播圖片數(shù)量、css樣式等，小伙伴也可根據(jù)自己的需求做相應(yīng)調(diào)整。
具體實(shí)現(xiàn)部分
特別重要的是，在我們寫(xiě)任何動(dòng)態(tài)效果之前，我們應(yīng)該先把靜態(tài)頁(yè)面寫(xiě)出來(lái)，在考慮動(dòng)態(tài)效果的實(shí)現(xiàn)。
HTML代碼：

<div id="div1">
    <ul class="big_pic">//主圖部分
        <div class="prev">
            <a class="mark_left" href="#"></a>
        </div>
        <div class="next">
            <a class="mark_right" href="#"></a>
        </div>
        <div class="text">圖片1詳情</div>
        <div class="length">1/6</div>
        <li style="z-index: 1"><img src="images/flash_1.jpg" /></li>
        <li><img src="images/flash_2.jpg" /></li>
        <li><img src="images/flash_3.jpg" /></li>
        <li><img src="images/flash_4.jpg" /></li>
        <li><img src="images/flash_5.jpg" /></li>
        <li><img src="images/flash_6.jpg" /></li>
    </ul>
    <ul class="small_pic" >//下部導(dǎo)航
        <li><img src="images/flash_1.jpg" /></li>
        <li><img src="images/flash_2.jpg" /></li>
        <li><img src="images/flash_3.jpg" /></li>
        <li><img src="images/flash_4.jpg" /></li>
        <li><img src="images/flash_5.jpg" /></li>
        <li><img src="images/flash_6.jpg" /></li>
    </ul>
</div>

Css樣式：

@charset "utf-8";
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
#div1 {
  width: 500px;
  height: 420px;
  margin: 100px auto;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
#div1 ul.big_pic {
  position: relative;
  height: 320px;
}
#div1 ul.big_pic div.prev {
  opacity: 0;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 50%;
  z-index: 100;
}
#div1 ul.big_pic div.prev a.mark_left {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 50%;
  left: 10px;
  background: url("../images/btn.gif");
}
#div1 ul.big_pic div.next {
  opacity: 0;
  -webkit-transition: all .5s linear;
  transition: all .5s linear;
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 100;
}
#div1 ul.big_pic div.next a.mark_right {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 50%;
  right: 10px;
  background: url("../images/btn.gif") left -60px;
}
#div1 ul.big_pic div.text {
  position: absolute;
  bottom: 0;
  left: 0;
  line-height: 26px;
  color: white;
  background-color: rgba(0, 0, 0, 0.51);
  width: 70%;
  height: 26px;
  z-index: 200;
  font-size: 14px;
  padding-left: 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
#div1 ul.big_pic div.length {
  position: absolute;
  bottom: 0;
  right: 0;
  line-height: 26px;
  color: white;
  background-color: rgba(0, 0, 0, 0.51);
  width: 30%;
  height: 26px;
  z-index: 200;
  font-size: 14px;
  text-align: center;
}
#div1 ul.big_pic li {
  position: absolute;
  top: 0;
  left: 0;
  width: 500px;
  height: 320px;
  overflow: hidden;
}
#div1 ul.big_pic li img {
  width: 100%;
  height: 320px;
}
#div1 ul.small_pic {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #b0b0b0;
  height: 100px;
  padding: 6px 5px 6px 8px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: absolute;
}
#div1 ul.small_pic li {
  width: calc(500px / 3);
}
#div1 ul.small_pic li img {
  width: calc(488px / 3);
  height: 100%;
}
#div1 ul.small_pic li:not(:last-child) img {
  padding-right: 4px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

接下來(lái)是最重要的js代碼：

  var oDiv=document.getElementById('div1');
    var oPrv=oDiv.querySelector('div.prev');
    var oNext=oDiv.querySelector('div.next');
    var oBtnPrev=oPrv.querySelector('a.mark_left');
    var oBtnNext=oNext.querySelector('a.mark_right');
    var oText=oDiv.querySelector('div.text');
    var oLength=oDiv.querySelector('div.length');
    var aUl=oDiv.querySelectorAll('ul');
    var aBigLi=aUl[0].querySelectorAll('li');
    var aSmallLi=aUl[1].querySelectorAll('li');  //獲取標(biāo)簽

    var zIndex=1,now=0;//zIndex：主圖Z軸層級(jí)，now:下面導(dǎo)航圖片的下標(biāo)（從0開(kāi)始）
    oBtnNext.onclick=function () {//單擊右鍵切換圖片
        now++;
        if(now===aSmallLi.length) now=0;//當(dāng)now等于導(dǎo)航圖片的長(zhǎng)度時(shí)，把導(dǎo)航圖片換成第一張
        opublic();
    };
    oBtnPrev.onclick=function () {//單擊左邊按鈕切換圖片
        now--;
        if(now===-1) now=aSmallLi.length-1;//當(dāng)now等于-1，把主圖片換成最后
        opublic();
    };
    for (var i=0;i<aSmallLi.length;i++){
        aSmallLi[i].style.opacity=.6;//統(tǒng)一設(shè)置下面導(dǎo)航圖片透明度為0.6
        aSmallLi[0].style.opacity=1;//初始化第一個(gè)導(dǎo)航圖片透明度為1
        aSmallLi[i].index=i;//為每一個(gè)導(dǎo)航圖加一個(gè)index的自定義屬性
        aSmallLi[i].onclick=function () {//添加單擊事件
            now=this.index;//當(dāng)單擊圖片后，主圖切換為對(duì)應(yīng)圖片
            opublic();
        };
    }
    function opublic(){//公共部分
        aBigLi[now].style.zIndex=zIndex++;//圖片切換改變Z軸層級(jí)
        aBigLi[now].style.height=0;
        startMove(aBigLi[now],'height',320);//圖片高度從0->360，實(shí)現(xiàn)圖片動(dòng)態(tài)疊加效果

        oText.innerHTML='圖片'+(now+1)+'詳情';
        oLength.innerHTML=(now+1)+'/'+aBigLi.length;

        for(var i=0;i<aSmallLi.length;i++)
        {
            startMove(aSmallLi[i], 'opacity', 60);
        }
        startMove(aSmallLi[now], 'opacity', 100);

        if(now===0){
            startMove(aUl[1], 'left', 0);
        }
        else if(now===aSmallLi.length-1){//當(dāng)當(dāng)前導(dǎo)航圖片為最后一張時(shí)，固定最后一張圖片位置
            startMove(aUl[1], 'left', -(now-2)*aSmallLi[0].offsetWidth);
        }
        else{//下面導(dǎo)航圖片的輪播效果
            startMove(aUl[1], 'left', -(now-1)*aSmallLi[0].offsetWidth);
        }
    }
    oPrv.onmouseover=oNext.onmouseover=function () {//鼠標(biāo)移入左右按鈕出現(xiàn)
        this.style.opacity=1;
    };
    oPrv.onmouseout=oNext.onmouseout=function () {//鼠標(biāo)移出左右按鈕消失
        this.style.opacity=0;
    };

    var timer=setInterval(oBtnNext.onclick, 3000);//設(shè)置一個(gè)定時(shí)器，每3秒鐘模擬一次右邊按鈕的單擊事件
    oDiv.onmouseenter=function () {//鼠標(biāo)移入后，定時(shí)器取消
        clearInterval(timer);
    };
    oDiv.onmouseleave=function () {//鼠標(biāo)離開(kāi)后開(kāi)啟定時(shí)器
        timer=setInterval(oBtnNext.onclick, 3000);
    }
function startMove(obj, attr, iTarget)//運(yùn)動(dòng)框架
//obj:運(yùn)動(dòng)的對(duì)象，attr:運(yùn)動(dòng)的屬性，iTarget：目標(biāo)值
{
    clearInterval(obj.timer);
    obj.timer=setInterval(function (){
        var cur=0;
        if(attr==='opacity')
        {
            cur=Math.round(parseFloat(getStyle(obj, attr))*100);
        }
        else
        {
            cur=parseInt(getStyle(obj, attr));
        }
        var speed=(iTarget-cur)/10;
        speed=speed>0?Math.ceil(speed):Math.floor(speed);

        if(cur==iTarget)
        {
            clearInterval(obj.timer);
        }
        else
        {
            if(attr=='opacity')
            {
                obj.style.filter='alpha(opacity:'+(cur+speed)+')';
                obj.style.opacity=(cur+speed)/100;
            }
            else
            {
                obj.style[attr]=cur+speed+'px';
            }
        }
    }, 30);
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 通過(guò)學(xué)習(xí)，我理解了圖片輪播原理，學(xué)習(xí)了setTimeout()、setInterval()函數(shù)設(shè)置定時(shí)器與清除定時(shí)...
    McRay閱讀 2,285評(píng)論 0贊 7
  • 輪播呢，也是各種網(wǎng)站上常見(jiàn)的一種展示效果，這里我來(lái)寫(xiě)一寫(xiě)實(shí)現(xiàn)輪播的一些簡(jiǎn)單方法。//不知道為什么系統(tǒng)吃了代碼里面的...
    zkhChris閱讀 35,925評(píng)論 3贊 140
  • 這是前陣子寫(xiě)的2款原生JS輪播，一個(gè)是漸變輪播預(yù)覽，一個(gè)是滾動(dòng)輪播預(yù)覽，現(xiàn)在補(bǔ)充博文總結(jié)。 漸變輪播 因?yàn)槭鞘崂碜?..
    妙言Lisa閱讀 1,015評(píng)論 2贊 7
  • 效果圖如下： 源碼放在Github上了： 我是源碼 我是效果預(yù)覽 基本功能： 四張圖片循環(huán)播放； 無(wú)操作時(shí)自動(dòng)從左...
    朱小維閱讀 1,013評(píng)論 2贊 3
  • 前端學(xué)習(xí)時(shí)間不長(zhǎng)，最近看完了第一遍高設(shè)，想著試著寫(xiě)一點(diǎn)東西，于是有了這個(gè)還不算好的輪播效果。（學(xué)習(xí)出處為慕課網(wǎng)） ...
    JellyFive閱讀 654評(píng)論 0贊 6

友情鏈接更多精彩內(nèi)容