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