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

 更新时间:2017年03月10日 17:21:27   作者:端着木鱼敲代码  
这篇文章主要介绍了bootstrap的Carousel配合dropload.js实现移动端滑动切换图片,实现方法非常简单,具有参考借鉴价值,需要的朋友可以参考下

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

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

相关文章

  • 使用Promise解决多层异步调用的简单学习心得

    使用Promise解决多层异步调用的简单学习心得

    下面小编就为大家带来一篇使用Promise解决多层异步调用的简单学习心得。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • JavaScript面向对象程序设计中对象的定义和继承详解

    JavaScript面向对象程序设计中对象的定义和继承详解

    这篇文章主要介绍了JavaScript面向对象程序设计中对象的定义和继承,结合实例形式详细分析了javascript面向对象程序设计中对象定义、继承、属性、方法、深拷贝等相关概念与操作技巧,需要的朋友可以参考下
    2019-07-07
  • Javascript连接Access数据库完整实例

    Javascript连接Access数据库完整实例

    这篇文章主要介绍了Javascript连接Access数据库的方法,涉及javascript针对access数据库的连接、关闭及增删改查等常用操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • JS DOM 操作实现代码

    JS DOM 操作实现代码

    JS DOM 操作实现代码,学习dom操作的朋友可以参考下。
    2010-08-08
  • 原生js实现放大镜

    原生js实现放大镜

    本文主要分享了原生js实现放大镜效果的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 微信小程序模版渲染详解

    微信小程序模版渲染详解

    这篇文章主要为大家详细介绍了微信小程序模版渲染的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • JavaScript生成GUID的多种算法小结

    JavaScript生成GUID的多种算法小结

    这篇文章介绍了GUID的几种生成算法,有需要的朋友可以参考一下
    2013-08-08
  • javascript函数式编程程序员的工具集

    javascript函数式编程程序员的工具集

    函数式编程语言一向被认为是比其它编程语言更高深的语言。一是因为函数式编程语言的语法很另类,比如Lisp语言,二是因为函数式编程语言都很古老,比如Schema语言。在如今面向对象语言大行其道的时代,函数式编程语言有其特殊的优势
    2015-10-10
  • JS代码实现table数据分页效果

    JS代码实现table数据分页效果

    这篇文章主要介绍了JS代码实现table数据分页效果的相关资料,非常不错,代码简答易懂,非常实用,需要的朋友可以参考下
    2016-05-05
  • JS中showModalDialog 的使用解析

    JS中showModalDialog 的使用解析

    JS中showModalDialog 的使用解析,需要的朋友可以参考一下
    2013-04-04

最新评论