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

相关文章

  • js实现关闭网页出现是否离开提示

    js实现关闭网页出现是否离开提示

    本篇文章主要给大家带来一个JS实用功能,监听浏览器在关闭的时候提示出是否要离开的小功能,需要的朋友学习下吧。
    2017-12-12
  • 微信小程序复选框实现多选一功能过程解析

    微信小程序复选框实现多选一功能过程解析

    这篇文章主要介绍了微信小程序复选框实现多选一功能过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • 详解关于webpack多入口热加载很慢的原因

    详解关于webpack多入口热加载很慢的原因

    这篇文章主要介绍了详解关于webpack多入口热加载很慢的原因,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • 一文带你掌握JavaScript中的执行上下文和作用域

    一文带你掌握JavaScript中的执行上下文和作用域

    作为一名前端工作人员,我们必须知道JavaScript内部是如何执行的。那对于执行上下文和作用域的理解至关重要,无论是工作还是面试都是无法跳跃的一步,本文就来带大家深入了解一下
    2023-02-02
  • JS正则表达式替换字符串replace()方法实例代码

    JS正则表达式替换字符串replace()方法实例代码

    正则表达式是用于匹配字符串中字符组合的模式,在js中正则表达式是对象,这篇文章主要给大家介绍了关于JS正则表达式替换字符串replace()方法的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • javascript中的五种基本数据类型

    javascript中的五种基本数据类型

    在javascript中申明变量使用的关键字都是var,这点与其他的编程语言不尽相同,但是javascript亦含有五种基本的数据类型(也可以说是简单数据类型),它们分别是:Undefined,Null,Boolean,Number和String。还含有一种复杂数据类型—Object。这里我们不谈复杂数据类型
    2015-08-08
  • javascript验证身份证号

    javascript验证身份证号

    这篇文章主要介绍了javascript验证身份证号,十分的详细,需要的朋友可以参考下
    2015-03-03
  • Bootstrap项目实战之子栏目资讯内容

    Bootstrap项目实战之子栏目资讯内容

    Bootstrap项目实战之资讯内容,本文主要学习制作一下子栏目资讯内容,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • 如何给ss bash 写一个 WEB 端查看流量的页面

    如何给ss bash 写一个 WEB 端查看流量的页面

    由于刚毕业的穷大学生,和朋友合租了一台服务器开了多个端口提供 ss 服务,懒得配置 ss-panel,就使用了 ss-bash 来监控不同端口的流量,但每次都要等上服务器才能看到流量使用情况,很麻烦,于是就写了个简单的页面来提供 WEB 访问,具体内容一起通过本文学习吧
    2017-03-03
  • JS通过调用微信API实现微信支付功能的方法示例

    JS通过调用微信API实现微信支付功能的方法示例

    这篇文章主要介绍了JS通过调用微信API实现微信支付功能的方法,结合具体实例形式分析了javascript微信支付接口的调用方法与相关注意事项,需要的朋友可以参考下
    2017-06-06

最新评论