手机端Zepto框架，利用swipejs插件做banner轮播图

一，HTML部分
<div class="banner">
            <div id="slider" class="swipe">
                <ul class="swipe-wrap">
                    <li>
                        <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
                            <img src="img/1.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
                            <img src="img/2.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
                            <img src="img/3.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
                            <img src="img/4.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
                            <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>

二，css部分

.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;
            }

三，js部分

<script src=”jquery.js”></script>

<script src=”zepto.js”></script>

<script src=”swipe.js”></script>

<script>

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: fuction(index, elem) {
                slider.find(".slide-trigger").find("li").eq(index).addClass("cur").siblings().removeClass("cur");
            }
        });

</script>