slider-H5.js 代碼：

(function($) {
    /*
        圖片滾動(dòng)效果
        @jQuery or @String box : 滾動(dòng)列表jQuery對象或者選擇器 如：滾動(dòng)元素為li的外層ul
        @object config : {
                @Number width : 一次滾動(dòng)寬度，默認(rèn)為box里面第一個(gè)一級子元素寬度[如果子元素寬度不均勻則滾動(dòng)效果會(huì)錯(cuò)亂]
                @Number size : 列表長度，默認(rèn)為box里面所有一級子元素個(gè)數(shù)[如果size不等于一級子元素個(gè)數(shù)，則不支持循環(huán)滾動(dòng)]
                @Boolean loop : 是否支持循環(huán)滾動(dòng) 默認(rèn) true
                @Boolean auto : 是否自動(dòng)滾動(dòng),支持自動(dòng)滾動(dòng)時(shí)必須支持循環(huán)滾動(dòng)，否則設(shè)置無效,默認(rèn)為true
                @Number auto_wait_time : 自動(dòng)輪播一次時(shí)間間隔,默認(rèn)為：3000ms
                @Function callback : 滾動(dòng)完回調(diào)函數(shù)，參入一個(gè)參數(shù)當(dāng)前滾動(dòng)節(jié)點(diǎn)索引值
            }
    */
    function mggScrollImg(box, config) {
        this.box = $(box);
        this.config = $.extend({},
        config || {});
        this.width = this.config.width || this.box.children().eq(0).width(); //一次滾動(dòng)的寬度
        this.size = this.config.size || this.box.children().length;
        this.loop = this.config.loop !== undefined ? (this.config.loop == true ? true: false) : true; //默認(rèn)能循環(huán)滾動(dòng)
        this.auto = this.config.auto !== undefined ? (this.config.auto == true ? true: false) : true; //默認(rèn)自動(dòng)滾動(dòng)
        this.auto_wait_time = this.config.auto_wait_time || 3000; //輪播間隔
        this.scroll_time = this.config.scroll_time !== undefined ? (this.config.scroll_time > 0 ? this.config.scroll_time: 0) : 300; //滾動(dòng)時(shí)長
        this.minleft = -this.width * (this.size - 1); //最小left值，注意是負(fù)數(shù)[不循環(huán)情況下的值]
        this.maxleft = 0; //最大lfet值[不循環(huán)情況下的值]
        this.now_left = 0; //初始位置信息[不循環(huán)情況下的值]
        this.point_x = null; //記錄一個(gè)x坐標(biāo)
        this.point_y = null; //記錄一個(gè)y坐標(biāo)
        this.move_left = false; //記錄向哪邊滑動(dòng)
        this.index = 0;
        this.busy = false;
        this.timer;
        this.init();
    }                                     
    $.extend(mggScrollImg.prototype, {
        init: function() {
            this.bind_event();
            this.init_loop();
            this.auto_scroll();
        },
        bind_event: function() {
            var self = this;
            self.box.bind('touchstart',
            function(e) {
                var t = e.touches ? e.touches: e.originalEvent.targetTouches;
                if (t.length == 1 && !self.busy) {
                    self.point_x = t[0].screenX;
                    self.point_y = t[0].screenY;
                }
            }).bind('touchmove',
            function(e) {
                var t = e.touches ? e.touches: e.originalEvent.targetTouches;
                if (t.length == 1 && !self.busy) {
                    return self.move(t[0].screenX, t[0].screenY); //這里根據(jù)返回值覺得是否阻止默認(rèn)touch事件
                }
            }).bind('touchend',
            function(e) { ! self.busy && self.move_end();
            });
        },
        /*
            初始化循環(huán)滾動(dòng),當(dāng)一次性需要滾動(dòng)多個(gè)子元素時(shí)，暫不支持循環(huán)滾動(dòng)效果,
            如果想實(shí)現(xiàn)一次性滾動(dòng)多個(gè)子元素效果，可以通過頁面結(jié)構(gòu)實(shí)現(xiàn)
            循環(huán)滾動(dòng)思路：復(fù)制首尾節(jié)點(diǎn)到尾首
        */
        init_loop: function() {
            if (this.box.children().length > 1 && this.box.children().length == this.size && this.loop) { //暫時(shí)只支持size和子節(jié)點(diǎn)數(shù)相等情況的循環(huán)
                this.now_left = -this.width; //設(shè)置初始位置信息
                this.minleft = -this.width * this.size; //最小left值
                this.maxleft = -this.width;
                this.box.prepend(this.box.children().eq(this.size - 1).clone()).append(this.box.children().eq(1).clone()).css(this.get_style(2));
                this.box.css('width', this.width * (this.size + 2));
            } else {
                this.loop = false;
                this.box.css('width', this.width * this.size);
            }                           
        },
        auto_scroll: function() { //自動(dòng)滾動(dòng)
            var self = this;
            if (!self.auto) return;
            clearTimeout(self.timer);
            self.timer = setTimeout(function() {
                self.go_index(self.index + 1);
            },
            self.auto_wait_time);
        },
        go_index: function(ind) { //滾動(dòng)到指定索引頁面
            var self = this;
            if (self.busy) return;
            clearTimeout(self.timer);
            self.busy = true;
            if (self.loop) { //如果循環(huán)
                ind = ind < 0 ? -1 : ind;
                ind = ind > self.size ? self.size: ind;
            } else {
                ind = ind < 0 ? 0 : ind;
                ind = ind >= self.size ? (self.size - 1) : ind;
            }
            if (!self.loop && (self.now_left == -(self.width * ind))) {
                self.complete(ind);
            } else if (self.loop && (self.now_left == -self.width * (ind + 1))) {
                self.complete(ind);
            } else {
                if (ind == -1 || ind == self.size) { //循環(huán)滾動(dòng)邊界
                    self.index = ind == -1 ? (self.size - 1) : 0;
                    self.now_left = ind == -1 ? 0 : -self.width * (self.size + 1);
                } else {
                    self.index = ind;
                    self.now_left = -(self.width * (self.index + (self.loop ? 1 : 0)));
                }
                self.box.css(this.get_style(1));
                setTimeout(function() {
                    self.complete(ind);
                },
                self.scroll_time);
            }
        },
        complete: function(ind) { //動(dòng)畫完成回調(diào)
            var self = this;
            self.busy = false;
            self.config.callback && self.config.callback(self.index);
            if (ind == -1) {
                self.now_left = self.minleft;
            } else if (ind == self.size) {
                self.now_left = self.maxleft;
            }
            self.box.css(this.get_style(2));
            self.auto_scroll();
        },
        next: function() { //下一頁滾動(dòng)
            if (!this.busy) {
                this.go_index(this.index + 1);
            }
        },
        prev: function() { //上一頁滾動(dòng)
            if (!this.busy) {
                this.go_index(this.index - 1);
            }                                     },
        move: function(point_x, point_y) { //滑動(dòng)屏幕處理函數(shù)
            var changeX = point_x - (this.point_x === null ? point_x: this.point_x),
            changeY = point_y - (this.point_y === null ? point_y: this.point_y),
            marginleft = this.now_left,
            return_value = false,
            sin = changeY / Math.sqrt(changeX * changeX + changeY * changeY);
            this.now_left = marginleft + changeX;
            this.move_left = changeX < 0;
            if (sin > Math.sin(Math.PI / 3) || sin < -Math.sin(Math.PI / 3)) { //滑動(dòng)屏幕角度范圍：PI/3  -- 2PI/3
                return_value = true; //不阻止默認(rèn)行為
            }
            this.point_x = point_x;
            this.point_y = point_y;
            this.box.css(this.get_style(2));
            return return_value;
        },
        move_end: function() {
            var changeX = this.now_left % this.width,
            ind;
            if (this.now_left < this.minleft) { //手指向左滑動(dòng)
                ind = this.index + 1;
            } else if (this.now_left > this.maxleft) { //手指向右滑動(dòng)
                ind = this.index - 1;
            } else if (changeX != 0) {
                if (this.move_left) { //手指向左滑動(dòng)
                    ind = this.index + 1;
                } else { //手指向右滑動(dòng)
                    ind = this.index - 1;
                }
            } else {
                ind = this.index;
            }
            this.point_x = this.point_y = null;
            this.go_index(ind);
        },
        /*
            獲取動(dòng)畫樣式，要兼容更多瀏覽器，可以擴(kuò)展該方法
            @int fig : 1 動(dòng)畫 2  沒動(dòng)畫
        */
        get_style: function(fig) {
            var x = this.now_left,
            time = fig == 1 ? this.scroll_time: 0;
            return {
                '-webkit-transition': '-webkit-transform ' + time + 'ms',
                '-webkit-transform': 'translate3d(' + x + 'px,0,0)',
                '-webkit-backface-visibility': 'hidden',
                'transition': 'transform ' + time + 'ms',
                'transform': 'translate3d(' + x + 'px,0,0)'
            };
        }           

    });
    /*
        這里對外提供調(diào)用接口，對外提供接口方法
        next ：下一頁
        prev ：上一頁
        go ：滾動(dòng)到指定頁
    */
    $.mggScrollImg = function(box, config) {
        var scrollImg = new mggScrollImg(box, config);
        return { //對外提供接口
            next: function() {
                scrollImg.next();
            },
            prev: function() {
                scrollImg.prev();
            },
            go: function(ind) {
                scrollImg.go_index(parseInt(ind) || 0);
            }
        }
    }
})(jQuery)

關(guān)于“如何實(shí)現(xiàn)H5+CSS3手指滑動(dòng)切換圖片”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。