Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片


Posted in Javascript onMarch 10, 2017

轮播图可以通过点击按钮来跳到上一张或者下一张,在移动端我们常用的就是通过滑动来实现一些时间,那么如何实现呢。

以下是通过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="http://img04.taobaocdn.com/bao/uploaded/i4/TB1LrSzIpXXXXaTXVXXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg" >
        <!--<div class="carousel-caption"></div>-->
       </div>
       <div class="item">
        <img width="100%" src="http://img01.taobaocdn.com/bao/uploaded/i1/TB1RXNmHFXXXXanXFXXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg" >
        <!--<div class="carousel-caption"></div>-->
       </div>
       <div class="item">
        <img width="100%" src="http://img01.taobaocdn.com/bao/uploaded/i1/TB1TjfsHVXXXXcSXVXXXXXXXXXX_!!1-item_pic.gif_220x220.jpg" >
        <!--<div class="carousel-caption"></div>-->
       </div>
      </div>
     </div>
    </div>
   </div>

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实现移动端滑动切换图片,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery ready()的几种实现方法小结
Jun 18 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 Javascript
Node.js中child_process实现多进程
Feb 03 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
Node.js Sequelize如何实现数据库的读写分离
Oct 23 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 Javascript
基于Bootstrap框架实现图片切换
Mar 10 #Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 #Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 #Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 #Javascript
Web纯前端“旭日图”实现元素周期表
Mar 10 #Javascript
微信小程序 MD5的方法详解及实例代码
Mar 10 #Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 #Javascript
You might like
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
使用php判断网页是否gzip压缩
2013/06/25 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
php中adodbzip类实例
2014/12/08 PHP
php给图片加文字水印
2015/07/31 PHP
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
js中将多个语句写成一个语句的两种方法小结
2007/12/08 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
利用Three.js如何实现阴影效果实例代码
2017/09/26 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
前端路由&amp;webpack基础配置详解
2019/06/10 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
javascript用defineProperty实现简单的双向绑定方法
2020/04/03 Javascript
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
python之线程通过信号pyqtSignal刷新ui的方法
2019/01/11 Python
flask应用部署到服务器的方法
2019/07/12 Python
python右对齐的实例方法
2020/07/05 Python
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
印尼在线旅游门户网站:NusaTrip
2019/11/01 全球购物
Ibatis中如何提高SQL Map的性能
2013/05/11 面试题
5s推行计划书
2014/05/06 职场文书
年终奖发放方案
2014/06/02 职场文书
领导干部作风建设总结
2014/10/23 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
毕业实习感受与体会
2015/05/26 职场文书
烈士陵园观后感
2015/06/08 职场文书
《刷子李》教学反思
2016/02/20 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书