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 相关文章推荐
ExtJS 简介 让你知道extjs是什么
Dec 29 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
Oct 27 Javascript
jQuery代码优化 选择符篇
Nov 01 Javascript
js模拟select下拉菜单控件的代码
May 08 Javascript
requireJS使用指南
Apr 27 Javascript
node.js 中国天气预报 简单实现
Jun 06 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
React Native自定义控件底部抽屉菜单的示例
Feb 08 Javascript
vue使用axios上传文件(FormData)的方法
Apr 14 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
如何去掉文章里的 html 语法
2006/10/09 PHP
php 正则表达式小结
2009/08/31 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
表单验证正则表达式实例代码详解
2015/11/09 Javascript
jQuery实现简单的点赞效果
2020/05/29 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
Python在Console下显示文本进度条的方法
2016/02/14 Python
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
python算法演练_One Rule 算法(详解)
2017/05/17 Python
wxPython之解决闪烁的问题
2018/01/15 Python
python 接口返回的json字符串实例
2018/03/27 Python
python删除文本中行数标签的方法
2018/05/31 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
python的常见矩阵运算(小结)
2019/08/07 Python
8段用于数据清洗Python代码(小结)
2019/10/31 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
idea2020手动安装python插件的实现方法
2020/07/17 Python
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
环境工程专业自荐信
2014/03/03 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
健康家庭事迹材料
2014/05/02 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
慈善献爱心倡议书
2015/04/27 职场文书
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python