頻道欄目
首頁 > 資訊 > HTML 5 > 正文

HTML5的自定義data-*實現圖片切換或者輪播(代碼實例)

18-06-02        來源:[db:作者]  
收藏   我要投稿

除了用swipper等插件實現圖片的切換之外,我們通過引入html5規范中的自定義data屬性來實現圖片切換。

在詳細介紹怎么實現切換之前,先介紹data屬性的使用方法。

<div class="dragon_eggs">
                <img src="./img/dragon_egg1.png" alt="" id="dragon_eggImg" data-awesome='{"index":0,"status":false}'>
              </div>

我們通過使用jquery的.data()方法來訪問這些"data-*"屬性。例如

  let index = $('#dragon_eggImg').data('awesome').index
    let status = dragon_eggsImgs[index].status

而通過$('#dragon_eggImg').data('awesome').index=0;來改變index或者false的值。

這是我們常見的用法,那么接下來就實現圖片切換或者輪播

輪播

setTimeout(function(){
 $('#dragon_eggImg').attr('src', dragon_eggsImgs[index + 1].srcImg)
      $('#dragon_eggImg').data('awesome').index = index + 1
},1000)

切換:

 if (action == 'next_btn') {
      $('#dragon_eggImg').attr('src', dragon_eggsImgs[index + 1].srcImg)
      $('#dragon_eggImg').data('awesome').index = index + 1
    }
    else if (action == 'pre_btn') {
      $('#dragon_eggImg').attr('src', dragon_eggsImgs[index - 1].srcImg)
      $('#dragon_eggImg').data('awesome').index = index - 1
    }
相關TAG標簽
上一篇:臺積電:絕大多數7nm客戶都會轉向6nm_IT新聞_博客園
下一篇:最后一頁
相關文章
圖文推薦

關于我們 | 聯系我們 | 廣告服務 | 投資合作 | 版權申明 | 在線幫助 | 網站地圖 | 作品發布 | Vip技術培訓 | 舉報中心

版權所有: 紅黑聯盟--致力于做實用的IT技術學習網站

美女MM131爽爽爽毛片