富贵资源网 Design By www.hznty.com
轮播图可以通过点击按钮来跳到上一张或者下一张,在移动端我们常用的就是通过滑动来实现一些时间,那么如何实现呢。
以下是通过bootstrap的Carousel和dropload.js(移动端上下拉动刷新插件)的实现方法。
HTML部分
<div id="goods_lunbo" style="width:200%;overflow:hidden;margin-left:-50%;"> <div id="goods_lunbo2" style="width:50%;overflow:hidden;margin:0 auto;"> <div id="carousel-example-generic0" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic0" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic0" data-slide-to="1"></li> <li data-target="#carousel-example-generic0" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" id="carousel-inner-z" role="listbox"> <div class="item active"> <img width="100%" src="/UploadFiles/2021-04-02/TB1LrSzIpXXXXaTXVXXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg">JS部分
var carousel_=$("#carousel-example-generic0"); $("#goods_lunbo").touchwipe({ ReferenceMaterial:"#goods_lunbo2",//套的div distance : 100,//表示滑动的距离 wipeLeftFn:function(){console.log("佐佐佐");carousel_.carousel('prev');},//向左滑动屏幕 wipeRightFn:function(){console.log("呦呦呦");carousel_.carousel('next');},//向右滑动屏幕 nowipe:function(){} });以上所述是小编给大家介绍的Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com
暂无评论...