频道栏目
首页 > 程序开发 > web前端 > HTML 5 > 正文
HTML5的自定义data-*实现图片切换或者轮播(代码实例)
2018-06-02 11:37:16         来源:red_heel的博客  
收藏   我要投稿

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

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

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

我们通过使用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
    }
点击复制链接 与好友分享!回本站首页
上一篇:HTML5中的伪类选择器实现一张图片翻转特效(代码实例)
下一篇:h5高度塌陷代码实例
相关文章
图文推荐
文章
推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站