移動端圖片輪播—swipe滑動插件

時間 2019-11-09

標籤移動圖片 swipe 滑動插件欄目無線简体版

原文原文鏈接

swipe是一個輕量級的移動滑動組件，它能夠支持精確的觸滑移動操做，能解決移動端對滑動的需求。css

swipe插件的使用主要有四大塊：html

1、htmlweb

<div id='slider' class='swipe'>
  <div class='swipe-wrap'>
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</div>

1.最外層的div的id是自定義的，這個是須要傳入到swipe中的app

2.最外層div的class="swipe"和第二層div的class="swipe-wrap"是寫死的，swipe會查找這兩個樣式而後作相應的處理dom

3.第三層的div，是滑動元素的單元。第三層div裏可加內容,都是以第三層div爲單元進行滑動的ide

2、css函數

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}

1.swipe、swipe-wrap、swipe-wrap > div，這3個是swipe裏的樣式是必需要用的post

2.除此之外，能夠對swipe-wrap > div設置一些其餘樣式，如居中、長、寬等性能

3、jsflex

var mySwipe = new Swipe(document.getElementById('slider'), {
  startSlide: 4,  //起始圖片切換的索引位置
  auto: 3000, //設置自動切換時間，單位毫秒
  continuous: true,  //無限循環的圖片切換效果
  disableScroll: true,  //阻止因爲觸摸而滾動屏幕
  stopPropagation: false,  //中止滑動事件
  callback: function(index, element) {},  //回調函數，切換時觸發
  transitionEnd: function(index, element) {}  //回調函數，切換結束調用該函數
});

4、API(可選)

prev() //上一頁
next() //下一頁
getPos() //獲取當前頁的索引
getNumSlides() //獲取全部項的個數
slide(index, duration) //滑動方法

API使用方法：

<button onclick="Swipe.prev()">prev</button>
<button onclick="Swipe.next()">next</button>

5、優缺點

1.優勢：滑動與防滑性能不錯，用戶體驗較好；Html結構簡單，自定義較靈活

2.缺點：div的高度取決於切換內容最大高度，若是某個單元div無內容，那麼會出現一個空白區域；

初始化後，第1、2、三層的div寬度固定；

dom結構固定，初始化後，插件對dom綁定事件，沒法在js中增長滑動的dom結構；

滑動後纔會觸發swipe插件的callback和transitionEnd函數。

6、demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <script src="/zepto.js"></script>
    <script src="/swipe.js"></script>
    <style>
        .swipe {
            overflow: hidden;
            visibility: hidden;
            position: relative;
        }
        .swipe-wrap {
            overflow: hidden;
            position: relative;
        }
        .wrap-slide {
            float:left;
            width:100%;
            position: relative;
            display: -webkit-box;  /*移動端圖片居中顯示*/
            -webkit-box-orient: horizontal;
            -webkit-box-pack: center;
            overflow: hidden;  /*圖片過大時，溢出div寬的隱藏，以避免影響其餘圖片的滑動*/
        }
        .slide-img {
            height: 300px; /*固定圖片高*/
        }
        .loading {
            position: absolute;
            top: 120px;
            left: 150px;
        }
        .mod-load{
            text-align: center;
            padding: 15px 0;
            color: @fontColor4;
            font-size: 12px;
        }
        @-webkit-keyframes loading{
            0%{-webkit-transform: rotate(0deg);}
            50%{-webkit-transform: rotate(180deg);}
            100%{-webkit-transform: rotate(360deg);}
        }
        .icon-loading{
            display: inline-block;
            width: 15px;
            height: 15px;
            vertical-align: -4px;
            margin-right: 6px;
            transform-style: preserve-3d;
            -webkit-backface-visibility: hidden;
            -webkit-animation-name: loading;
            -webkit-animation-duration: 1.2s;
            -webkit-animation-timing-function: linear;
            -webkit-animation-iteration-count: infinite;
            -moz-animation-name: loading;
            -moz-animation-duration: 1.2s;
            -moz-animation-timing-function: linear;
            -moz-animation-iteration-count: infinite;
        }
        .detail {
            display: -webkit-box;
            -webkit-box-orient: horizontal;
            -webkit-box-pack: justify;
            box-sizing: border-box;
            width: 100%;
        }
        .info {
            -webkit-box-flex: 1;
        }
        .title {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            word-break: break-all;
            overflow: hidden;
            -webkit-line-clamp: 1;
            line-clamp: 1;
        }
        .desc {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            word-break: break-all;
            overflow: hidden;
            -webkit-line-clamp: 3;
            line-clamp: 3;
        }
        .num {
            border-left: 1px solid #000;
            padding-left: 5px;
            max-width: 18%;
            text-align: center;
        }
    </style>
</head>
<body>
<div id='slider' class='swipe'>
    <div class='swipe-wrap'>
        <div class="wrap-slide">
            <img class='slide-img' data-src="http://tgi1.jia.com/115/551/15551390.jpg"></img>
        </div>
        <div class="wrap-slide">
            <img class='slide-img' data-src="http://tgi1.jia.com/115/551/15551440.jpg"></img>
        </div>
        <div class="wrap-slide">
            <img class='slide-img' data-src="http://tgi13.jia.com/115/551/15551388.jpg"></img>
        </div>
    </div>
</div>
<div class='detail'>
    <div class='info'>
        <div class='title'></div>
        <div class='desc'></div>
    </div>
    <div class='num'></div>
</div>
<script>
    var $img=$('.slide-img');
    var $slide=$('.wrap-slide');
    var $detail=$('.detail');
    var $title=$('.title');
    var $desc=$('.desc');
    var $num=$('.num');
    var windowHeight = $(window).height();
    var pos=0;
    var imgSrc=$img[pos];
    var src;
    var imgLoad;
    var imgHeight;
    var posHeight;
    var detailHeight;

    loading();
    lazyLoad(pos);

    var mySwipe = new Swipe(document.getElementById('slider'), {
        startSlide: 0,
        speed: 400,
        continuous: false,
        disableScroll: false,
        stopPropagation: false,
        callback: function(index, elem) {
            pos = index;
            imgSrc = $img[pos];
            if (imgSrc.hasAttribute('data-src')) {
                loading();
                lazyLoad(pos);
            }else {
                description(pos)
            }
        },
        transitionEnd: function(index, elem) {}
    });

    //加載中...
    function loading(){
        var loadingHtml = '<div class="loading">'
                +   '<div class="mod-load list-loading">'
                +   '<img class="icon-loading" src="/loading.png">'
                +   '加載中...'
                + '</div></div>';
        $(loadingHtml).appendTo($slide);
    }

    //圖片延遲加載
    function lazyLoad(pos){
        src = $(imgSrc).attr('data-src');
        $(imgSrc).attr('src',src).removeAttr('data-src');
        imgLoad =document.querySelectorAll(".slide-img")[pos];
        imgLoad.addEventListener("load",function(event){
            $('.loading').remove();
            description(pos);
        });
    }

    //圖片描述
    function description(pos){
        $title.html('我是標題我是標題我是標題我是標題'+pos);
        $desc.html('我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容'+pos);
        $num.html(pos);
        imgHeight= $img[pos].height;
        detailHeight = $detail.height();
        posHeight =imgHeight;
        if(posHeight + detailHeight > windowHeight) {
            $detail.css({
                'top':windowHeight - detailHeight + 'px',
            });
        }else {
            $detail.css({
                'top':posHeight+'px',
            });
        }
    }
</script>
</body>
</html>