首页 > 程序开发 > web前端 > HTML 5 >

HTML5的自定义data-*实现图片切换或者轮播(代码实例)

2018-06-02

HTML5的自定义data-*实现图片切换或者轮播(代码实例)。除了用swipper等插件实现图片的切换之外,我们通过引入html5规范中的自定义data属性来实现图片切换。

除了用swipper等插件实现图片的切换之外,我们通过引入html5规范中的自定义data属性来实现图片切换。

在详细介绍怎么实现切换之前,先介绍data属性的使用方法。

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

我们通过使用jquery的.data()方法来访问这些"data-*"属性。例如

  let index = $(&#39;#dragon_eggImg&#39;).data(&#39;awesome&#39;).index
    let status = dragon_eggsImgs[index].status

而通过$(&#39;#dragon_eggImg&#39;).data(&#39;awesome&#39;).index=0;来改变index或者false的值。

这是我们常见的用法,那么接下来就实现图片切换或者轮播

轮播

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

切换:

 if (action == &#39;next_btn&#39;) {
      $(&#39;#dragon_eggImg&#39;).attr(&#39;src&#39;, dragon_eggsImgs[index + 1].srcImg)
      $(&#39;#dragon_eggImg&#39;).data(&#39;awesome&#39;).index = index + 1
    }
    else if (action == &#39;pre_btn&#39;) {
      $(&#39;#dragon_eggImg&#39;).attr(&#39;src&#39;, dragon_eggsImgs[index - 1].srcImg)
      $(&#39;#dragon_eggImg&#39;).data(&#39;awesome&#39;).index = index - 1
    }
相关文章
最新文章
热点推荐