這篇文章主要為大家展示了“原生js如何實現(xiàn)輪播特效”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“原生js如何實現(xiàn)輪播特效”這篇文章吧。

鶴山ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！

首先css代碼

a{text-decoration:none;color:#3DBBF5;}
   *{
    margin: 0;
    padding: 0;
   }
   .wrapper{
    width: 400px;
    height: 300px;
    margin: 100px auto;
   }
   #lunbo{
    position: relative;
    overflow: hidden;
   }
   #list{
    position: relative;
    white-space: nowrap; // 這塊用行元素模擬，所以才用該屬性，塊元素可修改這塊
   }
   #list span{
    display: inline-block;
    width: 400px;
    height: 300px;
    text-align: center;
    line-height: 300px;
    font-weight: bold;
    font-size: 100px;
    color: #fff;
   }
   #buttons{
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    height: 40px;
    line-height: 40px;
   }
   #buttons span{
    display: inline-block;
    width: 15px;
    height: 5px;
    background: #fff;
    margin: 0 10px;
    cursor: pointer;
    transition: all .5s;
   }
   #buttons span.on{
    height: 20px;
   }
   .arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 80px;
    font-weight: bold;
    color: #fff;
    opacity: .3;
    transition: all .5s;
   }
   .wrapper:hover .arrow{
    opacity: 1;
   }
   #prev{
    left: 10px;
   }
   #next{
    right: 10px;
   }

然后HTML代碼

<div class="wrapper">
   <div id="lunbo">
    <div id="list" >
     <span >5</span><span >1</span><span >2</span><span >3</span><span >4</span><span >5</span><span >1</span>
    </div>
    <div id="buttons">
     <span index="1" class="on"></span>
     <span index="2"></span>
     <span index="3"></span>
     <span index="4"></span>
     <span index="5"></span>
    </div>
    <a href="javascript:;" id="prev" class="arrow">&lt;</a>
    <a href="javascript:;" id="next" class="arrow">&gt;</a>
   </div>
  </div>

最后js代碼

window.onload=function () {
   var lunBo = document.getElementById("lunbo");
   var list = document.getElementById("list");
   var btn = document.getElementById("buttons").getElementsByTagName('span');
   var prev = document.getElementById("prev");
   var next = document.getElementById('next');
   var interval = 3000;
   var timer;
   var index = 1;
   var animated = false;
   for (var i=0;i<btn.length;i++) { //按鈕加點擊事件
    btn[i].onclick=function () {
     if(this.className=='on') //如果是狀態(tài)按鈕直接返回節(jié)約資源
     {
      return
     };
     var myIndex =parseInt(this.getAttribute('index'));//獲取按鈕的index屬性值
     var offset = -400*(myIndex-index); //根據(jù)屬性值 計算偏移量
     animate(offset)  //輪播動畫
     index = myIndex; // 改變索引值
     showBtn();   //顯示狀態(tài)按鈕
    }
   }
   function showBtn () { 
    for (var i=0;i<btn.length;i++) {
     btn[i].className=''; 
    }
    btn[index-1].className='on';
   }
   prev.onclick=function () { //上一頁事件
    if (animated) { //如果是動畫狀態(tài) 直接返回解決bug
     return;
    }
    if (index==1) { 
     index =btn.length;
    } else{
     index-=1;
    }
    animate(400); 
    showBtn();
   }
   next.onclick=function () {
    if (animated) {
     return;
    }
    if (index==btn.length) {
     index =1;
    } else{
     index+=1;
    }
    animate(-400);
    showBtn();
   }
   function animate(offset) {
    animated = true; //表示在動畫狀態(tài)
    var newLeft = parseInt(list.style.left) + offset; //計算新的left值
    var time = 400; //設(shè)置動畫總時間
    var interval = 10; //動畫幀時間
    var speed = offset/(time/interval); //每幀運動距離
    function go () { 
     if ((speed>0 && parseInt(list.style.left)<newLeft) || (speed<0 && parseInt(list.style.left)>newLeft)) { //通過條件判斷到它是否還要繼續(xù)進(jìn)行動畫
      list.style.left = parseInt(list.style.left) + speed +'px';
      setTimeout(go,interval) 
     } else{
      animated = false; //動畫狀態(tài)結(jié)束
      list.style.left = newLeft + 'px'; //現(xiàn)在的位移
      if (parseInt(list.style.left)<-2000) { // 輔助假圖
       list.style.left = -400 + 'px';
      } else if( parseInt(list.style.left)>-400){
       list.style.left = -2000 + 'px';
      }
     }
    }
    go();
   }
   function play () { 
    timer = setTimeout(function () {
     next.onclick();
     play();
    },interval)
   }
   play();
   function stop () {
    clearTimeout(timer);
   }
   lunBo.onmouseover=stop;
   lunBo.onmouseout=play;
  }

以上是“原生js如何實現(xiàn)輪播特效”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站jinyejixie.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站標(biāo)題：原生js如何實現(xiàn)輪播特效-創(chuàng)新互聯(lián)
分享路徑：http://jinyejixie.com/article24/ccpgje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)站收錄、網(wǎng)站維護(hù)、網(wǎng)站改版、網(wǎng)站營銷、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)