apiCloud组件：swiper

一、apicloud中基于swiper封装了一个模块供调用。就是swiper.js

页面引入js就行

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

方法有

1 startSlide: 4,  //起始图片切换的索引位置
2 auto: 3000, //设置自动切换时间，单位毫秒
3 continuous: true,  //无限循环的图片切换效果
4 disableScroll: true,  //阻止由于触摸而滚动屏幕
5 stopPropagation: false,  //停止滑动事件
6 callback: function(index, element) {},  //回调函数，切换时触发
7 transitionEnd: function(index, element) {}  //回调函数，切换结束调用该函数。
1 除此之外，还有一些比较使用的API方法，例如：
2 
3 prev()：上一页
4 next()：下一页
5 getPos()：获取当前页的索引
6 getNumSlides()：获取所有项的个数
7 slide(index, duration)：滑动方法

Swipe使用方法

了解基本函数方法后，我们就来看看使用方法。

首先是HTML结构：

 1 <div id='slider' class='swipe'>
 2         <div class='swipe-wrap'>
 3             <div class="swipe-box">
 4                 <img src="../image/firstcover01.png" alt="">
 5             </div>
 6             <div class="swipe-box">
 7                 <img src="../image/firstcover02.png" alt="">
 8             </div>
 9             <div class="swipe-box">
10                 <img src="../image/firstcover03.png" alt="">
11             </div>
12         </div>
13     </div>

然后是样式代码：

 1 .swipe {
 2     overflow: hidden;
 3     visibility: hidden;
 4     position: relative;
 5 }
 6 .swipe-wrap {
 7     overflow: hidden;
 8     position: relative;
 9 }
10 .swipe-wrap > figure {
11     float: left;
12     width: 100%;
13     position: relative;
14 }

.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调用

1 var slider = Swipe(document.getElementById('slider'), {
2   auto: 3000,
3             continuous: true,
4 });
1 在这里只要把上面介绍的函数参数写在里面，就可以实现相对应的功能。
2 
3 最后我们也可以给滑动切换添加上下按钮：
4 
5 <button onclick="Swipe.prev()">prev</button>
6 <button onclick="Swipe.next()">next</button>

apicloud调用

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

 这个实现之后没有都点的变化，想要都点的变化：

#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

posted @ 2017-02-23 22:29  haonanElva  阅读(3179)  评论(1)  编辑  收藏  举报