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

除了用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
    }