亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

zepto中使用swipe.js制作輪播圖附swipeUp,swipeDown不起效果問題

 更新時(shí)間：2015年08月27日 17:20:21   投稿：mrr  
Swipe JS 是一個(gè)輕量級(jí)的移動(dòng)滑動(dòng)組件，支持 1:1 的觸摸移動(dòng)，阻力以及防滑性能都不錯(cuò)，可以讓移動(dòng)web應(yīng)用展現(xiàn)更多的內(nèi)容，能解決我們對(duì)于移動(dòng)Web對(duì)滑動(dòng)的需求。下面小編給大家介紹zepto中使用swipe.js制作輪播圖附swipeUp,swipeDown不起效果問題，需要朋友可以參考下

在移動(dòng)web開發(fā)中，由于手機(jī)界面較小，為了能展示更多的圖片經(jīng)常使用輪播圖并且還需要考慮到手機(jī)流量的問題，通過請(qǐng)教他人以及百度，個(gè)人感覺swipe.js比較好用。

它是一個(gè)純javascript工具，不需要跟其它js庫一起導(dǎo)入，同時(shí)兼容jQuery和zepto，壓縮版的大小只有6kb很適合移動(dòng)端的開發(fā)，它的git地址：https://github.com/thebird/swipe

在git上對(duì)其的使用方式介紹的相當(dāng)清楚，關(guān)鍵代碼如下

<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這個(gè)html樹模型最好不要改動(dòng)，至于最里面的div可以更換其他，如li 等

僅僅只需要上訴的幾段代碼即可完成輪播圖的制作，但是在實(shí)際的項(xiàng)目中，特別是在首頁頂部的banner上還需要加入page的索引，還需要對(duì)控件的參數(shù)進(jìn)行配置，它的主要參數(shù)配置如下：

startSlide Integer (default:0) - 開始滾動(dòng)的位置

speed Integer (default:300) - 動(dòng)畫滾動(dòng)的間隔（秒數(shù)）

auto Integer - 開始自動(dòng)幻燈片（以毫秒為單位幻燈片之間的時(shí)間）

continuous Boolean (default:true) - 創(chuàng)建一個(gè)無限的循環(huán)（當(dāng)滑動(dòng)到所有動(dòng)畫結(jié)束時(shí)是否循環(huán)滑動(dòng)）

disableScroll Boolean (default:false) - 當(dāng)滾動(dòng)滾動(dòng)條時(shí)是否停止幻燈片滾動(dòng) 

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

callback Function - 幻燈片運(yùn)行中的回調(diào)函數(shù)

transitionEnd Function - 動(dòng)畫運(yùn)行結(jié)束的回調(diào)函數(shù) 

而他的主要api函數(shù)如下：

prev()：上一頁 

next()：下一頁

getPos()：獲取當(dāng)前頁的索引 

getNumSlides()：獲取所有項(xiàng)的個(gè)數(shù)

slide(index, duration)：滑動(dòng)方法

以下是偶在項(xiàng)目中的實(shí)際運(yùn)用的代碼

<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，然后看到里面一些事件的時(shí)候發(fā)現(xiàn)一個(gè)問題：

$(‘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
})

在移動(dòng)端swipeUp，swipeDown不起效果，另外幾個(gè)有效，是怎么回事呢？

解決方案一：

zepto要引入 touch.js模塊 官網(wǎng)上是沒有的 去github下載 然后引入 touch.js即可

解決方案二：

是因?yàn)樽柚沽藶g覽器默認(rèn)的下拉事件，加上下面一段代碼。

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

相關(guān)文章

最新評(píng)論