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

相关文章

  • 详解JavaScript类型判断的四种方法

    详解JavaScript类型判断的四种方法

    这篇文章主要介绍了JavaScript类型判断的四种方法,帮助大家更好的理解和学习JavaScript,感兴趣的朋友可以了解下
    2020-10-10
  • JS基于面向对象实现的拖拽库实例

    JS基于面向对象实现的拖拽库实例

    这篇文章主要介绍了JS基于面向对象实现的拖拽库,以实例形式分析了JavaScript设置水平、垂直拖拽及限制拖拽范围的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • javascript 获取HTML DOM父、子、临近节点

    javascript 获取HTML DOM父、子、临近节点

    经常要获取页面中某个元素,然后更新该元素的样式、内容等。如何获取要更新的元素,是首先要解决的问题。这里简单做一下总结
    2014-06-06
  • javascript基于DOM实现省市级联下拉框的方法

    javascript基于DOM实现省市级联下拉框的方法

    这篇文章主要介绍了javascript基于DOM实现省市级联下拉框的方法,可实现选择省份后出现对应城市下拉框选项的功能,非常具有实用价值,需要的朋友可以参考下
    2015-05-05
  • Bootstrap table的使用方法

    Bootstrap table的使用方法

    这篇文章主要为大家详细解析了JS组件Bootstrap Table使用方法,具有一定的实用性和参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • JS实现的四叉树算法详解

    JS实现的四叉树算法详解

    这篇文章主要介绍了JS实现的四叉树算法,简单分析了四叉树的相关概念、原理、实现方法及操作注意事项,需要的朋友可以参考下
    2018-12-12
  • 微信小程序实现人脸检测功能

    微信小程序实现人脸检测功能

    这篇文章主要为大家详细介绍了微信小程序实现人脸检测功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • 如何理解JavaScript模块化

    如何理解JavaScript模块化

    模块化简单来说就是将一个完整的长篇代码文件根据功能进行划分成几个文件,这些文件各自负责一个独立的功能,各个文件组合起来实现一个完整的大功能,这就是模块化,每个负责独立功能的文件就是模块。
    2021-05-05
  • js中取得变量绝对值的方法

    js中取得变量绝对值的方法

    这篇文章主要介绍了js中取得变量绝对值的方法,较为详细的分析了js中abs方法取绝对值的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • 原生JS实现飞机大战小游戏

    原生JS实现飞机大战小游戏

    这篇文章主要为大家详细介绍了原生JS实现飞机大战小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06

最新评论