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 相关文章推荐
破除网页鼠标右键被禁用的绝招大全
Dec 27 Javascript
经常用到的JavasScript事件的翻译
Apr 09 Javascript
WEB 浏览器兼容 推荐收藏
May 14 Javascript
jquery中获取元素的几种方式小结
Jul 05 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
Jun 24 Javascript
JavaScript插件化开发教程 (一)
Jan 27 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
Sep 10 Javascript
JavaScript实现的伸展收缩型菜单代码
Oct 14 Javascript
jquery动态添加文本并获取值的方法
Oct 12 Javascript
angular中的cookie读写方法
Aug 02 Javascript
Vue2几种常见开局方式详解
Sep 09 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 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
德生S2000电路分析
2021/03/02 无线电
php多层数组与对象的转换实例代码
2013/08/05 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
JavaScript实现删除电脑的关机键
2016/07/26 PHP
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
详解jquery事件delegate()的使用方法
2016/01/25 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
JavaScript在控件上添加倒计时功能的实现代码
2017/07/04 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
Python中文字符串截取问题
2015/06/15 Python
深入浅析python 中的匿名函数
2018/05/21 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
python如何调用字典的key
2020/05/25 Python
python主要用于哪些方向
2020/07/05 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
美国一家全面的在线零售鞋类公司:SHOEBACCA
2017/01/06 全球购物
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
促销活动策划方案
2014/01/12 职场文书
2014年乡镇植树节活动方案
2014/02/28 职场文书
党员干部承诺书
2014/03/25 职场文书
群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
金秋助学感谢信
2015/01/21 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
讲文明倡议书
2015/04/29 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书