javascript手寫輪播圖播放效果

LuDongWei 發(fā)布于2019-08-23 11:37 / 3481人閱讀

摘要：早前做輪播圖的時(shí)候，我們習(xí)慣在網(wǎng)上找一些現(xiàn)成的例子修改修改使用。現(xiàn)在做輪播圖，像和等前端框架中都有封裝好的特效，直接拿過(guò)來(lái)使用就可以了。下面我們用原生代碼來(lái)手寫一個(gè)輪播圖的特效。

早前做輪播圖的時(shí)候，我們習(xí)慣在網(wǎng)上找一些現(xiàn)成的例子修改修改使用?，F(xiàn)在做輪播圖，像bootstrap和iview等前端框架中都有封裝好的特效，直接拿過(guò)來(lái)使用就可以了。但是輪播圖是怎么做的呢。下面我們用原生代碼來(lái)手寫一個(gè)輪播圖的特效。
實(shí)現(xiàn)效果如下：（圖片來(lái)自網(wǎng)絡(luò)）

實(shí)現(xiàn)功能如下：

鼠標(biāo)劃在左半部分出現(xiàn)左箭頭切換，鼠標(biāo)劃在右半部分出現(xiàn)右箭頭切換。

點(diǎn)擊數(shù)字播放，當(dāng)前播放頁(yè)數(shù)字背景透明度為1，非當(dāng)前頁(yè)透明度為0.6

點(diǎn)擊縮略圖播放，當(dāng)前播放頁(yè)縮略圖透明度為1，非當(dāng)前頁(yè)縮略頭透明度為0.3

間隔2000ms自動(dòng)播放（包括圖片、數(shù)字、縮略圖）。

根據(jù)前面運(yùn)動(dòng)知識(shí)，實(shí)現(xiàn)代碼如下：

我們把前面總結(jié)的運(yùn)動(dòng)框架封裝在move.js中

move.js

function getStyle(obj,name){
  if(obj.currentStyle){
    return obj.currentStyle[name];
  }
  else{
    return getComputedStyle(obj,false)[name];
  }
}

function startMove(obj, attr, iTarget) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function() {
    var cur=0;
    if(attr==="opacity"){
      cur=Math.round(parseFloat(getStyle(obj,attr))*100);//有可能會(huì)出現(xiàn)誤差0.07*100
    }
    else{
      cur=parseInt(getStyle(obj,attr));
    }
    var speed = (iTarget - cur) / 6;
    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)
}

GPU云服務(wù)器云服務(wù)器 javascript輪播圖輪播圖寫輪播圖將輪播圖

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97218.html

相關(guān)文章

手把手教你用原生JavaScript造輪子（2）——輪播圖（更新：ES6版本）

摘要：綁定輪播事件然后是鼠標(biāo)移入移出事件的綁定鼠標(biāo)移入移出事件移入時(shí)停止輪播播放的定時(shí)器，移出后自動(dòng)開始下一張的播放。通過(guò)上一篇文章的學(xué)習(xí)，我們基本掌握了一個(gè)輪子的封裝和開發(fā)流程。那么這次將帶大家開發(fā)一個(gè)更有難度的項(xiàng)目——輪播圖，希望能進(jìn)一步加深大家對(duì)于面向?qū)ο蟛寮_發(fā)的理解和認(rèn)識(shí)。 So, Lets begin! 目前項(xiàng)目使用 ES5及UMD 規(guī)范封裝，所以在前端暫時(shí)只支持標(biāo)簽的引入方式...

jasperyang 2019-08-23 10:57 評(píng)論0 收藏0
JS基礎(chǔ)入門篇（十三）—定時(shí)器

摘要：但是定時(shí)器沒(méi)關(guān)。通過(guò)變量來(lái)控制定時(shí)器內(nèi)函數(shù)的執(zhí)行停止播放默認(rèn)為。方式三通過(guò)關(guān)閉定時(shí)器來(lái)停止輪播圖的運(yùn)動(dòng)。，通過(guò)傳入定時(shí)器的編號(hào)來(lái)。清除定時(shí)器，再開啟定時(shí)器。所以，每次打開定時(shí)器，先清除前一個(gè)。點(diǎn)擊頁(yè)面任何一個(gè)位置關(guān)閉定時(shí)器。 1.定時(shí)器定義：當(dāng)我們需要隔一段時(shí)間，再執(zhí)行一段代碼?；蛘呙扛粢欢螘r(shí)間，執(zhí)行一段代碼。我們可以使用定時(shí)器。使用場(chǎng)景：例如網(wǎng)站輪播圖的自動(dòng)滾動(dòng)。廣告延遲彈出的某些...

kaka 2019-08-29 15:31 評(píng)論0 收藏0
JS基礎(chǔ)入門篇（十三）—定時(shí)器

摘要：但是定時(shí)器沒(méi)關(guān)。通過(guò)變量來(lái)控制定時(shí)器內(nèi)函數(shù)的執(zhí)行停止播放默認(rèn)為。方式三通過(guò)關(guān)閉定時(shí)器來(lái)停止輪播圖的運(yùn)動(dòng)。，通過(guò)傳入定時(shí)器的編號(hào)來(lái)。清除定時(shí)器，再開啟定時(shí)器。所以，每次打開定時(shí)器，先清除前一個(gè)。點(diǎn)擊頁(yè)面任何一個(gè)位置關(guān)閉定時(shí)器。 1.定時(shí)器定義：當(dāng)我們需要隔一段時(shí)間，再執(zhí)行一段代碼?；蛘呙扛粢欢螘r(shí)間，執(zhí)行一段代碼。我們可以使用定時(shí)器。使用場(chǎng)景：例如網(wǎng)站輪播圖的自動(dòng)滾動(dòng)。廣告延遲彈出的某些...

BenCHou 2019-08-22 17:33 評(píng)論0 收藏0
JS基礎(chǔ)入門篇（十三）—定時(shí)器

摘要：但是定時(shí)器沒(méi)關(guān)。通過(guò)變量來(lái)控制定時(shí)器內(nèi)函數(shù)的執(zhí)行停止播放默認(rèn)為。方式三通過(guò)關(guān)閉定時(shí)器來(lái)停止輪播圖的運(yùn)動(dòng)。，通過(guò)傳入定時(shí)器的編號(hào)來(lái)。清除定時(shí)器，再開啟定時(shí)器。所以，每次打開定時(shí)器，先清除前一個(gè)。點(diǎn)擊頁(yè)面任何一個(gè)位置關(guān)閉定時(shí)器。 1.定時(shí)器定義：當(dāng)我們需要隔一段時(shí)間，再執(zhí)行一段代碼?；蛘呙扛粢欢螘r(shí)間，執(zhí)行一段代碼。我們可以使用定時(shí)器。使用場(chǎng)景：例如網(wǎng)站輪播圖的自動(dòng)滾動(dòng)。廣告延遲彈出的某些...

ermaoL 2019-08-02 10:32 評(píng)論0 收藏0
回顧自己三次失敗的面試經(jīng)歷

摘要：站在這個(gè)時(shí)間點(diǎn)上，我對(duì)自己之前三次失敗的面試經(jīng)歷做了一次深度回顧。關(guān)于我第三次面試失敗的經(jīng)歷，依然是與輪播圖有關(guān)。當(dāng)然，這次思特奇面試之旅，最后也是以失敗告終，這也是我離進(jìn)大廠最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言時(shí)間的齒輪已經(jīng)來(lái)到了2017年的11月份，距離2018年僅僅還剩下不到兩...

DC_er 2019-08-21 17:42 評(píng)論0 收藏0