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