成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

12行原生JS代碼實(shí)現(xiàn)最簡單的圖片輪播

keithxiaoy / 1246人閱讀

摘要：如果有錯誤，請指出，請原諒。俄羅斯左箭頭右箭頭將所有放入一個數(shù)組，將的值設(shè)置為俄羅斯加拿大楓葉澳大利亞澳大利亞加拿大楓葉澳大利亞獲取的屬性值，通過對進(jìn)行加，將對應(yīng)的數(shù)組元素設(shè)置為的屬性。定時器被取消后，需要重新設(shè)置定時器。利用定時器開始輪播

圖片輪播

js新手。如果有錯誤，請指出，請原諒。
``
// 


   


 

   左箭頭


 

   右箭頭





// 4.21
// 將所有URL放入一個數(shù)組，將index的值設(shè)置為0
var imgs = ["picture/俄羅斯.jpg","picture/加拿大楓葉.jpg","picture/澳大利亞.jpg","picture/澳大利亞2.jpg","picture/加拿大楓葉.jpg","picture/澳大利亞.jpg"];
var index = 0;
var stopValue = 0；
var startValue = 0;
// 獲取img的src屬性值，通過對index進(jìn)行加1，將對應(yīng)的數(shù)組元素設(shè)置為img的src屬性。
function carousel(){
    var img = document.getElementsByTagName("img")[0]
    if (index < imgs.length-1) {
        index++;
        img.setAttribute("src",imgs[index]);
    } else { // 當(dāng)index值變成5，進(jìn)入循環(huán)時，將img的src屬性設(shè)置為第一個url地址，同時index值變?yōu)?
        img.setAttribute("src","picture/俄羅斯.jpg")
        index = 0;
    }

}
// 4.22 鼠標(biāo)進(jìn)入stop，鼠標(biāo)離開start功能.
//鼠標(biāo)移動到箭頭所在的元素清楚定時器，鼠標(biāo)離開則恢復(fù)輪播
// 定義兩個全局變量stopValue 和startValue 為0；

// onmouseover和onmouseout從進(jìn)入對應(yīng)的元素范圍到離開對應(yīng)的元素范圍會執(zhí)行很多次，
// 通過兩個全局全局變量，讓它不管在對應(yīng)的元素范圍內(nèi)如何移動都只執(zhí)行一次，
//  避免setInterval時間出錯。
function stop(){
   stopValue+=1;
   if(stopValue < 2){
        clear();
       // 當(dāng)?shù)谝淮蝟nmouseover和onmouseout事件完成之后，全局變量的值改變，
       // 通過將兩個全局變量的值歸零，保證之后的onmouseover和onmouseout能執(zhí)行。
       startValue = 0
   }

};

 function start(){
    startValue+=1;
    if(startValue < 2){
        setInt()
        // 同上。
        stopValue = 0;
    }
};
    function clear() {
    clearInterval(int)
};
    function setInt(){
    // 定時器被clearInterval取消后，需要重新設(shè)置定時器。
    int = setInterval("carousel()",1000)
};
    // 利用定時器開始輪播
    var int= setInterval("carousel()",1000)

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

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

相關(guān)文章

  • 回顧自己三次失敗的面試經(jīng)歷

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

    DC_er 評論0 收藏0

  • 回顧自己三次失敗的面試經(jīng)歷

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

    spacewander 評論0 收藏0

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

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

    jasperyang 評論0 收藏0

  • FE.CSS-Sultana后記：純css也能寫col,select,datepicker,caro

    摘要：接著只要在中使用就能搞定自適應(yīng)。代碼如下標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題在上述點(diǎn)功能中，可以用變量解決，比如實(shí)現(xiàn)了寬度，高度圓點(diǎn)大小直徑的控件。 未完待續(xù) 背景 如今css3越來越發(fā)達(dá)，focus-within等屬性也已經(jīng)開始在Chrome得到支持。如果有出色的css功底，一點(diǎn)點(diǎn)ps技能，你也能用css3配合原生html標(biāo)簽寫出優(yōu)秀的框架。通過對css3的實(shí)踐，我發(fā)現(xiàn)自定義原生控件并不是什么難事，...

    BigTomato 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<