移动web中的幻灯片切换效果

百度或者谷歌下类似的插件有很多，原理都差不多，关键适合自己的项目，如果移动端要引入jquery这么大的插件，只能呵呵了....

下面是工作中针对webkit内核的浏览器写的，html很简单：

<section id="banner" class="banner z-c" >
            <ul class="z-c-w">
　　　　　　　　　<li class="z-c-i"></li>
　　　　　　　</ul>
</section>

上面的li标签实际都可以动态生成的，这里只是为了方便阅读才加上。

css:

.banner {
        position:relative;
        overflow:hidden;
        border-bottom:1px solid #FFFDFB;
        font-size:;
    }
    .z-c-w {
        display:-webkit-box;
        width:100%;
        height:100%;
    }
    .z-c-w.transitionable {
        -webkit-transition:-webkit-transform 0.25s ease;
    }
    .z-c-i {
        display:block;
        width:100%;
    }
    .z-c-p {
        position: absolute;
        margin-top: -13px;
        width: 100%;
        text-align: center;
    }
    .z-c-p span {
        display:inline-block;
        width:6px;
        height:6px;
        margin:0 4px;
        border-radius:50%;
        border:1px solid #7cca26;
    }
    .z-c-p span.active {
        background-color:#7cca26;
    }
    .z-c-i .img-wrapper{
        display: inline-block;
        width:100%;
        height:100%;
        background: #fafafa url('../images/cart_icon.png') no-repeat center center;
    }
    .z-c-i a{display: block;}
    .z-c-i .img-wrapper img{width:100%;}

javascript:需要引入zepto，zepto压缩后不到10k，是移动端开发不错的js库。

/*
 * carousel
 */
;(function($) {
    $.extend($.fn, {
        carousel : function(obj) {
            this.each(function(){
                // 当前Zepto对象
                var $self = $(this);

                var dom = {
                    wrap : $self.find(".z-c-w"),
                    items : $self.find(".z-c-i"),
                    pageControl : null,
                    pageItems : null
                };
                var settings = {
                    width : dom.wrap.width(),
                    count : dom.items.size(),
                    index : 0,
                    startX : 0,
                    startY : 0,
                    movingX : false,
                    movingY : false,
                    distance : 0,
                    pageControl : obj ? (obj.showControl ? true : false) : true,
                    autoScroll : obj ? (obj.autoScroll ? true : false) : false
                };
                var funs = {
                    init : function() {
                        funs.initUI();
                        funs.bindEvent();
                        if (settings.autoScroll) {
                            settings.interval = setInterval(funs.autoScroll, 5000);
                        }
                    },
                    bindEvent : function() {
                        dom.wrap.off().on({
                            "touchstart" : function(e) {

e.stopPropagation();
 　　　　　　　　　　　　　　　　　　e.preventDefault();

                                settings.width = dom.wrap.width();
                                settings.distance = settings.width / 4;

                                settings.startX = e.touches[0].pageX;
                                settings.startY = e.touches[0].pageY;

                                if (settings.autoScroll){
                                    clearInterval(settings.interval);
                                    //隐藏最后一个循环页
                                    dom.dupItem.css("visibility", "hidden");
                                }
                            },
                            "touchmove" : function(e) {
                                e.stopPropagation();
 　　　　　　　　　　　　　　　　　　e.preventDefault();
                                var currentX = e.touches[0].pageX;
                                var currentY = e.touches[0].pageY;
                                var dX = currentX - settings.startX;
                                var dY = currentY - settings.startY;

                                if (settings.movingX) {
                                    e.stopPropagation();
                                    e.preventDefault();
                                    var x = 0;
                                    if (settings.index == 0 && dX > 0 || settings.index == settings.count - 1 && dX < 0) {
                                        x = -settings.index * settings.width + dX / 3;
                                    } else {
                                        x = -settings.index * settings.width + dX;
                                    }
                                    dom.wrap.css("-webkit-transform", "translate3d(" + x + "px,0,0)");
                                } else if (!settings.movingY) {
                                    e.stopPropagation();
                                    var dX = Math.abs(dX);
                                    var dY = Math.abs(dY);
                                    if (dX > 10 && dX/dY > 1) {
                                        settings.movingX = true;
                                        settings.movingY = false;
                                    } else if(dY > 10 && dX/dY < 1) {
                                        settings.movingY = true;
                                        settings.movingX = false;
                                    }
                                }
                            },
                            "touchend" : function(e) {
                                e.stopPropagation();
 　　　　　　　　　　　　　　　　　　e.preventDefault();
                                settings.movingY = false;
                                if (settings.movingX) {
                                    settings.movingX = false;
                                    var currentX = e.changedTouches[0].pageX;
                                    var distance = currentX - settings.startX;
                                    if (Math.abs(distance) >= settings.distance) {
                                        settings.index = settings.index - Math.abs(distance) / distance;
                                        settings.index = settings.index < 0 ? 0 : (settings.index > (settings.count - 1) ? (settings.count - 1) : settings.index);
                                    }
                                    funs.continueMove();
                                }
                                if (settings.autoScroll) {
                                    settings.interval = setInterval(funs.autoScroll, 5000);
                                    setTimeout(function(){
                                        dom.dupItem.css("visibility", "visible");
                                    },250);
                                }
                            },
                            "webkitTransitionEnd" : function() {
                                dom.wrap.removeClass("transitionable");
                                if(settings.index >= settings.count){
                                    settings.index %= settings.count;
                                    dom.wrap.css("-webkit-transform", "translate3d(" + -settings.index * settings.width + "px,0,0)");
                                }
                            }
                        });
                        dom.pageControl.off().on("touchstart", function(e) {
                            settings.width = dom.wrap.width();
                            settings.distance = settings.width / 4;

                            var touchX = e.touches[0].pageX;
                            var currentX = $(dom.pageItems[settings.index]).offset().left;
                            if (touchX > currentX && settings.index < (settings.count - 1)) {
                                settings.index += 1;
                                funs.continueMove();
                            } else if (touchX < currentX && settings.index > 0) {
                                settings.index -= 1;
                                funs.continueMove();
                            }
                        });
                        $(window).on({
                            "resize" : function() {
                                funs.adjustPOS();
                            },
                            "orientationchange" : function() {
                                funs.adjustPOS();
                            }
                        });
                    },
                    adjustPOS : function() {
                        settings.width = dom.wrap.width();
                        settings.distance = settings.width / 5;
                        dom.wrap.css("-webkit-transform", "translate3d(" + -settings.index * settings.width + "px,0,0)");
                    },
                    continueMove : function() {
                        dom.wrap.addClass("transitionable");
                        dom.pageItems.removeClass("active");
                        $(dom.pageItems[settings.index % settings.count]).addClass("active");
                        dom.wrap.css("-webkit-transform", "translate3d(" + -settings.index * settings.width + "px,0,0)");
                    },
                    initUI : function() {
                        settings.distance = settings.width / 4;
                        if (settings.pageControl) {
                            $self.append(funs.createPageDOM());
                        }
                        dom.pageControl = $self.find(".z-c-p");
                        dom.pageItems = $self.find(".z-c-p>span");

                        if(settings.autoScroll){
                            //重复第一个页面用作尾部的循环
                            funs.dupFirstItem();
                        }
                    },
                    dupFirstItem : function() {
                        dom.dupItem = $self.find(".z-c-i:first-child").clone();
                        $(dom.wrap).append(dom.dupItem);
                    },
                    createPageDOM : function() {
                        var pageControlToRemove = $self.find(".z-c-p");
                        if (pageControlToRemove.length) {
                            pageControlToRemove.remove();
                        }
                        var pageFragment = document.createDocumentFragment();
                        var pageDiv = document.createElement("div");
                        pageDiv.setAttribute("class", "z-c-p");
                        pageFragment.appendChild(pageDiv);
                        var pageItemSpan = document.createElement("span");
                        pageItemSpan.setAttribute("class", "active");
                        pageDiv.appendChild(pageItemSpan);
                        for (var i = 1; i < settings.count; i++) {
                            pageItemSpan = document.createElement("span");
                            pageDiv.appendChild(pageItemSpan);
                        }
                        return pageFragment;
                    },
                    clear : function() {
                        var pageControlToRemove = $self.find(".z-c-p");
                        if (pageControlToRemove.length) {
                            pageControlToRemove.remove();
                        }
                        dom.wrap.empty().css("-webkit-transform", "translate3d(0,0,0)");
                    },
                    autoScroll : function() {
                        if(dom.wrap.width() > 0 && dom.items.width() > 0){
                            settings.index++;
                            settings.width = dom.wrap.width();
                            funs.continueMove(settings.index);
                        }
                    }
                };

                funs.init();

                $self.clear = funs.clear;
            });

            return this;
        }
    });
})(Zepto);

调用方法：

$("#banner").carousel({
                showControl: true,
                autoScroll: true
});

ps：切记在触屏事件的时候加上e.stopPropagation();和e.preventDefault，不然在android低端浏览器会有卡顿现象