apiCloud組件：swiper

一、apicloud中基於swiper封裝了一個模塊供調用。就是swiper.js

頁面引入js就行

<script type="text/javascript" src="../script/swipe.js"></script>

方法有

startSlide: 4,  //起始圖片切換的索引位置
auto: 3000, //設置自動切換時間，單位毫秒
continuous: true,  //無限循環的圖片切換效果
disableScroll: true,  //阻止由於觸摸而滾動屏幕
stopPropagation: false,  //停止滑動事件
callback: function(index, element) {},  //回調函數，切換時觸發
transitionEnd: function(index, element) {}  //回調函數，切換結束調用該函數。

除此之外，還有一些比較使用的API方法，例如：

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

Swipe使用方法

了解基本函數方法后，我們就來看看使用方法。

首先是HTML結構：

<div id='slider' class='swipe'>
        <div class='swipe-wrap'>
            <div class="swipe-box">
                <img src="../image/firstcover01.png" alt="">
            </div>
            <div class="swipe-box">
                <img src="../image/firstcover02.png" alt="">
            </div>
            <div class="swipe-box">
                <img src="../image/firstcover03.png" alt="">
            </div>
        </div>
    </div>

然后是樣式代碼：

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

.swipe {
width: 100%;
background-color: #fff;
overflow: hidden;
position: relative;
}

.swipe-wrap {
overflow: hidden;
position: relative;
}

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

.swipe-box img {
width: 100%;
border-radius: 10px;
}

.swipe .title-box {
width: 100%;
position: relative;
}

js調用

var slider = Swipe(document.getElementById('slider'), {
  auto: 3000,
            continuous: true,
});

在這里只要把上面介紹的函數參數寫在里面，就可以實現相對應的功能。

最后我們也可以給滑動切換添加上下按鈕：

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

apicloud調用

var slider =  Swipe( $api.dom('#slider'), {
            auto: 3000,
            continuous: true,
        });

 這個實現之后沒有都點的變化，想要都點的變化：

#swipeIndicator {
            position: absolute;
            left: 50%;
            bottom: 14px;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
        }

        #swipeIndicator li {
            height: 10px;
            width: 10px;
            border-radius: 100%;
            float: left;
            background: rgba(0, 0, 0, .8);
            margin-right: 10px;
        }

        #swipeIndicator li.active {
            background: #ff4d4d;
        }

<div id='slider' class='swipe'>
        <div class='swipe-wrap'>
            <div class="swipe-box">
                <img src="../image/b1.png" alt="">
            </div>
            <div class="swipe-box">
                <img src="../image/b2.png" alt="">
            </div>
            <div class="swipe-box">
                <img src="../image/b3.png" alt="">
            </div>
        </div>
        <div class="title-box">
            <ul id="swipeIndicator" class="title-box-ul">
                <li class="active"></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

js

//輪播組件
    window.onload = function() {
        var li = $api.domAll('.title-box-ul li');
        var mySwiper = Swipe($api.byId('slider'), {
            auto: 3000,
            speed: 800,
            continuous: true,
            callback: function(index, elem) {
                var i = li.length;
                while (i--) {
                    li[i].className = '';
                }
                li[index].className = 'active';
            }
        });
    };

 二、原生輪播模塊 UIScrollPicture