zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题


Posted in Javascript onAugust 27, 2015

在移动web开发中,由于手机界面较小,为了能展示更多的图片经常使用轮播图并且还需要考虑到手机流量的问题,通过请教他人以及百度,个人感觉swipe.js比较好用。

它是一个纯javascript工具,不需要跟其它js库一起导入,同时兼容jQuery和zepto,压缩版的大小只有6kb很适合移动端的开发,它的git地址:https://github.com/thebird/swipe

在git上对其的使用方式介绍的相当清楚,关键代码如下

<div id='slider' class='swipe'>
 <div class='swipe-wrap'>
  <div></div>
  <div></div>
  <div></div>
 </div>
</div>
.swipe {
 overflow: hidden;
 visibility: hidden;
 position: relative;
}
.swipe-wrap {
 overflow: hidden;
 position: relative;
}
.swipe-wrap > div {
 float:left;
 width:100%;
 position: relative;
}
window.mySwipe = Swipe(document.getElementById('slider'),opt);

其中.swipe嵌套.swipe-wrap这个html树模型最好不要改动,至于最里面的div可以更换其他,如li 等

仅仅只需要上诉的几段代码即可完成轮播图的制作,但是在实际的项目中,特别是在首页顶部的banner上还需要加入page的索引,还需要对控件的参数进行配置,它的主要参数配置如下:

startSlide Integer (default:0) - 开始滚动的位置

speed Integer (default:300) - 动画滚动的间隔(秒数)

auto Integer - 开始自动幻灯片(以毫秒为单位幻灯片之间的时间)

continuous Boolean (default:true) - 创建一个无限的循环(当滑动到所有动画结束时是否循环滑动)

disableScroll Boolean (default:false) - 当滚动滚动条时是否停止幻灯片滚动 

stopPropagation Boolean (default:false) - 是否停止事件冒泡 

callback Function - 幻灯片运行中的回调函数

transitionEnd Function - 动画运行结束的回调函数 

而他的主要api函数如下:

prev():上一页 

next():下一页

getPos():获取当前页的索引 

getNumSlides():获取所有项的个数

slide(index, duration):滑动方法

以下是偶在项目中的实际运用的代码

<div class="banner">
      <div id="slider" class="swipe">
        <ul class="swipe-wrap">
          <li>
            <a href="javascript:void(0)">
              <img src="img/1.jpg">
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <img src="img/2.jpg">
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <img src="img/3.jpg">
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <img src="img/4.jpg">
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <img src="img/5.jpg">
            </a>
          </li>
        </ul>
        <ul class="slide-trigger">
          <li class="cur"></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
.banner {
        width: 100%;
        position: relative;
      }
      .banner .swipe {
        overflow: hidden;
        position: relative;
      }
      .banner .swipe-wrap {
        overflow: hidden;
        position: relative;
        list-style: none;
      }
      .banner .swipe-wrap li {
        float: left;
        position: relative;
      }
      .banner img {
        width: 100%;
        vertical-align: middle;
      }
      .banner .slide-trigger {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 10;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        list-style: none;
      }
      .banner .slide-trigger li {
        width: 10px;
        height: 10px;
        background: #FFF;
        margin: 5px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
      }
      .banner .slide-trigger .cur {
        background: #2fc7c9;
      }
var slider = $('#slider');
    slider.find(".slide-trigger").find("li").eq(0).addClass("cur");
    window.mySwipe = new Swipe(document.getElementById('slider'), {
      speed: 400,
      auto: 3000,
      callback: function(index, elem) {
        slider.find(".slide-trigger").find("li").eq(index).addClass("cur").siblings().removeClass("cur");
      }
    });

zepto中的swipeUp,swipeDown不起效果

我正在看zepto,然后看到里面一些事件的时候发现一个问题:

$(‘body').swipeUp(function(e){
alert(‘swipeUp');//偶尔有效
})
$(‘body').swipeDown(function(e){
alert(‘swipeDown');//偶尔有效
})
$(‘body').tap(function(){
alert(‘tap');//ok
})
$(‘body').swipeLeft(function(){
alert(‘swipeLeft');//ok
})
$(‘body').swipeRight(function(){
alert(‘swipeRight');//ok
})

在移动端swipeUp,swipeDown不起效果,另外几个有效,是怎么回事呢?

解决方案一:

zepto要引入 touch.js模块 官网上是没有的 去github下载 然后引入 touch.js即可

解决方案二:

是因为阻止了浏览器默认的下拉事件,加上下面一段代码。

document.addEventListener('touchmove', function (event) {
event.preventDefault();
}, false);

Javascript 相关文章推荐
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
javascript 在firebug调试时用console.log的方法
May 10 Javascript
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
jquery ready(fn)事件使用介绍
Aug 21 Javascript
我的Node.js学习之路(二)NPM模块管理
Jul 06 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
Nov 27 Javascript
vscode中vue-cli项目es-lint的配置方法
Jul 30 Javascript
element上传组件循环引用及简单时间倒计时的实现
Oct 01 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 Javascript
Json实现传值到后台代码实例
Jun 30 Javascript
js前端设计模式优化50%表单校验代码示例
Jun 21 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 #Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 #Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 #Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 #Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 #Javascript
JavaScript中的Function函数
Aug 27 #Javascript
jquery带动画效果幻灯片特效代码
Aug 27 #Javascript
You might like
与数据库连接
2006/10/09 PHP
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
PHP的博客ping服务代码
2012/02/04 PHP
php设计模式之单例模式使用示例
2014/01/20 PHP
YII框架常用技巧总结
2019/04/27 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
js 获取时间间隔实现代码
2014/05/12 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
2015/09/04 Javascript
jQuery Mobile 和 Kendo UI 的比较
2016/05/05 Javascript
JS Ajax请求如何防止重复提交
2016/06/13 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
2017/07/12 Javascript
基于axios封装fetch方法及调用实例
2018/02/05 Javascript
element-ui的回调函数Events的用法详解
2018/10/16 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
在vue中实现给每个页面顶部设置title
2020/07/29 Javascript
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
python selenium 弹出框处理的实现
2019/02/26 Python
Python 如何展开嵌套的序列
2020/08/01 Python
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
实习生自我鉴定
2013/12/12 职场文书
我的老师教学反思
2014/05/01 职场文书
工作检讨书500字
2014/10/19 职场文书
迟到检讨书范文
2015/01/27 职场文书
生产车间主任岗位职责
2015/04/08 职场文书
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python