基於jquery的圖片輪播，tab切換組件

　　最近在做手機上的web app，很多場景需要使用到類似tab切換和圖片輪播的東西，需要支持手勢和鼠標點擊的，於是就基於jquery弄了一個，每一個參數有詳細的說明，目前只添加了scroll和none的效果，scroll即滑動的效果，可以支持x和y方向的滑動；none就是沒有任何效果，只是顯示和隱藏，后續需要添加其他效果再做擴展，寫的有點水，呵呵，在此留筆，防止丟失。更新后的版本，只支持單個圖輪播。

　　更新內容：將之前使用的用left控制動畫修改為使用css3的-webkit-transform來控制動畫，流暢度大大提升，另外使用translate3d和translateX來控制圖片的位移。如果不支持transform則會使用原來的left來控制圖片的位移。

　　Demo Address：http://kardel.sinaapp.com/qqbuy/1.html

檢測瀏覽器支持某屬性的方法：

// 檢查是否支持css屬性
var propertySupport = (function () {
    var element = document.createElement("i");
    var eleStyle = element.style;
    var prefix = ' -o- -moz- -ms- -webkit- '.split(' ');
    var domPrefs = 'Webkit Moz O ms'.split(' ');
    return {
        hasProperty:function (prop) {
            var camel = prop.charAt(0).toUpperCase() + prop.substr(1),
                    props = (prop + ' ' + domPrefs.join(camel + ' ') + camel).split(' ');
            for (var i in props) {
                if (eleStyle[props[i]] !== undefined) {
                    return true;
                }
            }
            return false;
        },
        isSupport3D:function () {
            if ('WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix()) {
                return true;
            }
            var css = ['perspectiveProperty', 'MozPerspective', 'OPerspective', 'msPerspective']
            for (var p in css) {
                if (css[p] in eleStyle) {
                    return true;
                }
            }
            return false;
        }
    }
})();

實現代碼：

$.fn.loopSlider = function (option) {
    function config(opt) {
        var setting = {
            // 默認顯示的順序
            initIndex: 1,
            // 加在狀態節點上的樣式
            className: "current",
            // 輪播方向，默認為x軸方向輪播
            direct: "x",
            // 上一張按鈕
            prevBtn: "",
            // 下一張按鈕
            nextBtn: "",
            // 上下翻頁按鈕禁用的樣式
            btnDisable: "disable",
            // 按鈕按下的樣式
            btnTouchClass: "",
            // 自動輪播
            auto: false,
            // 自動輪播時間間隔
            timeFlag: 4000,
            // 輪播效果時間
            scrollTime: 350,
            // 輪播效果
            effect: "scroll",
            // 在只有一個輪播元素的時候是否隱藏滑動按鈕
            hideBtn: true,
            // 是否循環輪播
            cycle: true,
            // 輪播的內容區的容器路徑
            contentContainer: "",
            // 輪播的內容區的節點
            contentChildTag: "",
            // 標題輪播區域的容器路徑
            titleContainer: "",
            // 標題輪播區域的節點
            titleChildTag: "",
            // 隱藏的圖片鏈接屬性
            imgAttr: "back_src",
            // 輪播的內容區的數組
            cont: [],
            // 輪播的標題區的數組
            tabs: [],
            // 顯示數量
            showNum: 1,
            // 元素間的margin值
            gapWidth: 0,
            // 輪播回調函數，每次輪播調用，參數為當前輪播的序號
            callback: function () {
                return true;
            }
        }
        $.extend(setting, opt);
        return setting;
    }

    var boss = $(this);
    var nodeList = [];
    boss.each(function (index) {
        nodeList[index] = {
            node: $(this),
            setting: config(option)
        }
        handleScroll(nodeList[index]);
    });
    return {
        get: function (index) {
            if (nodeList[index]) {
                return nodeList[index];
            } else {
                return false;
            }
        }
    };

    function handleScroll(obj) {
        var setting = obj.setting;
        // 當前頁
        setting.current = 0;
        // 定時器
        setting.ptr = "";
        var node = obj.node;
        setting.imgloadedNum = 0;
        // 初始化當前調用類型的函數
        setting.currentMethod = function () {
            return true;
        }
        // 如果不是第一個元素先輪播
        if (setting.initIndex != 1) {
            setting.current = setting.initIndex - 1;
        }
        // 獲取輪播的節點列表
        var childList = node.find(setting.contentContainer + " " + setting.contentChildTag);
        // 獲取輪播標題節點列表
        var titleList = node.find(setting.titleContainer + " " + setting.titleChildTag);
        // 上下箭頭
        var nextBtn = node.find(setting.nextBtn);
        var prevBtn = node.find(setting.prevBtn);
        // 保存內容區每一個輪播節點
        setting.cont = childList;
        // 保存標題的輪播節點
        setting.tabs = titleList;
        // 如果沒有需要輪播的內容，直接返回
        if (setting.cont.length <= 1) {
            if (setting.hideBtn) {
                prevBtn.hide();
                nextBtn.hide();
            }
            return;
        }
        var withtitle = setting.titleContainer && setting.tabs.length > 0;
        // 給內容區和標題區設置index屬性
        childList.each(function (index) {
            $(this).attr("index", index);
            // 設置了title，但是內容不足，補全
            if (withtitle && !setting.tabs[index]) {
                var first = titleList.eq(0);
                var cloneNode = first.clone();
                first.parent().append(cloneNode);
                cloneNode.attr("index", index);
            }
            titleList.eq(index).attr("index", index);
        });
        // 如果有添加過狀態節點，則重新更新一下狀態節點容器
        if (withtitle && setting.tabs.length != setting.cont.length) {
            titleList = node.find(setting.titleContainer + " " + setting.titleChildTag);
            setting.tabs = titleList;
        }
        // 長度
        var counts = childList.length;
        // 輪播容器的父節點
        var childParent = childList.parent();
        var titleParent = titleList.parent();
        if (childList.length < setting.initIndex) {
            setting.current = 0;
        }
        // 初始化
        doInit();
        /**
         * 處理無效果的切換
         */
        var doScrollNone = {
            process: function () {
                var i = setting.current;
                loadImage();
                childList.eq(i).css("display", "block").siblings().css("display", "none");
                titleList.eq(i).addClass(setting.className).siblings().removeClass(setting.className);
                // 調用回調函數
                setting.callback(setting.current);
                if (setting.auto) {
                    processAuto();
                }
            },
            init: function () {
                setting.currentMethod = doScrollNone;
                loadImage();
                bindEvent();
                // 自動輪播
                if (setting.auto) {
                    processAuto();
                }
                // 初始化的時候調用回調函數
                setting.callback(setting.current);
            }
        };
        var doScrollXY = {
            init: function () {
                // 輪播元素的寬度
                setting.c_width = childList.width();
                // 輪播元素的高度
                setting.c_height = childList.height();
                // 克隆第一個元素到最后
                if (setting.cycle && childList.length > 1) {
                    var firstNode = childList.eq(0).clone(true);
                    var lastNode = childList.eq(counts - 1).clone(true);
                    if (setting.direct == "x") {
                        lastNode.css({
                            position: 'relative',
                            left: -setting.c_width * (counts + 2)
                        });
                    } else {
                        lastNode.css({
                            position: 'relative',
                            top: -setting.c_height * (counts + 2)
                        });
                    }
                    firstNode.attr("index", 0);
                    firstNode.appendTo(childParent);
                    lastNode.attr("index", counts - 1);
                    lastNode.appendTo(childParent);
                    // 更新列表信息
                    childList = childParent.children();
                }
                // x軸方向輪播
                if (setting.direct == "x") {
                    childParent.width(setting.c_width * (setting.cycle ? counts + 2 : counts));
                    if (setting.transform) {
                        childParent.css({
                            "-webkit-backface-visibility": "hidden",
                            "-webkit-transform": "translateX(" + (-setting.c_width * (setting.current)) + "px)"
                        });
                    } else {
                        childParent.css('left', - setting.c_width * setting.current);
                    }
                } else {
                    childParent.width(setting.c_width);
                    childParent.height(setting.c_height * (setting.cycle ? counts + 2 : counts));
                    if (setting.transform) {
                        childParent.css({
                            "-webkit-backface-visibility": "hidden",
                            "-webkit-transform": "translateY(" + (-setting.c_height * (setting.current)) + "px)"
                        });
                    } else {
                        childParent.css('top', - setting.c_height * setting.current);
                    }
                }
                titleList.eq(setting.current).addClass(setting.className).siblings().removeClass(setting.className);
                setting.currentMethod = doScrollXY;
                // 初始化的時候也調用回調函數
                setting.callback(setting.current);
                // 綁定事件
                bindEvent();
                // 自動輪播
                if (setting.auto) {
                    processAuto();
                }
            },
            process: function () {
                var index = setting.current;
                var _this = this;
                loadImage();
                if (setting.direct == "x") {
                    this.processDirect("left", setting.c_width, index);
                } else {
                    this.processDirect("top", setting.c_height, index);
                }
                if (index == counts) {
                    index = 0;
                } else if (index == -1) {
                    index = counts - 1;
                }
                this.processEnd(index);
            },
            processDirect: function (direct, value, index) {
                var _this = this;
                var trans = direct == "left" ? "translateX" : "translateY";
                if (setting.transform) {
                    childParent.css({
                        "-webkit-transform": trans + "(" + (-value * index) + "px)",
                        "-webkit-transition": setting.scrollTime / 1000 + "s ease-out",
                        "-webkit-backface-visibility": "hidden"
                    });
                } else if (setting.transition) {
                    childParent.css({
                        direct: -value * index,
                        "-webkit-transition": direct + " " + setting.scrollTime / 1000 + "s ease-out",
                        "-webkit-backface-visibility": "hidden"
                    });
                } else {
                    childParent.animate({
                        direct: -value * index
                    }, setting.scrollTime);
                }
                setTimeout(function () {
                    if (setting.is3D) {
                        childParent.css({
                            "-webkit-transform": (direct == "left" ? "translate3d(" + (-value * index) + "px,0px,0px)" : "translate3d(0px," + (-value * index) + "px,0px)"),
                            "-webkit-transition": ""
                        });
                    }
                    if (setting.current == counts && setting.cycle) {
                        _this.moveElement();
                    } else if (setting.current == -1) {
                        if (setting.is3D) {
                            childParent.css({
                                "-webkit-transform": (direct == "left" ? "translate3d(" + (-value * (counts - 1)) + "px,0px,0px)" : "translate3d(0px," + (-value * (counts - 1)) + "px,0px)"),
                                "-webkit-transition": ""
                            });
                        } else {
                            childParent.css({
                                direct: -value * (counts - 1)
                            });
                        }
                    }
                    if (setting.auto) {
                        //非循環並且到了最后一個，停止定時器
                        !setting.cycle && setting.current == counts - 1 ? "" : processAuto();
                    }
                }, setting.scrollTime);
            },
            processEnd: function (index) {
                this.updateBtnStatus(index);
                // 調用回調函數
                setting.callback(index);
                titleList.eq(index).addClass(setting.className).siblings().removeClass(setting.className);
            },
            updateBtnStatus: function (i) {
                if (i == 0 && !setting.cycle) {
                    setting.prevBtn && prevBtn.addClass(setting.btnDisable);
                } else {
                    setting.prevBtn && prevBtn.removeClass(setting.btnDisable);
                }
                if (i == counts - 1 && !setting.cycle) {
                    setting.nextBtn && nextBtn.addClass(setting.btnDisable);
                } else {
                    setting.nextBtn && nextBtn.removeClass(setting.btnDisable);
                }
            },
            moveElement: function () {
                var lastNode = childList.eq(counts + 1);
                for (var i = 1; i < childList.length - 2; i++) {
                    childList.eq(i).remove().insertBefore(lastNode);
                }
                childList.eq(0).remove().insertBefore(lastNode);
                childParent.css({
                    "-webkit-transform": "translate3d(0px,0px,0px)",
                    "-webkit-transition": ""
                });
            }
        };
        var touchEvent = {
            startX: 0,
            startY: 0,
            currentPosition: 0,
            start: function (event) {
                if (event.changedTouches.length == 0) {
                    return;
                }
                var po = touchEvent.getPosition(event);
                touchEvent.startX = po.x;
                touchEvent.startY = po.y;
                //手勢滑動方向
                var moveDirect = "add";
                // 計算當前值的乘積因子
                var num = setting.current == -1 ? counts - 1 : setting.current != counts ? setting.current : 0;
                // 當前顯示元素所處的位置
                touchEvent.currentPosition = -num * (setting.direct == "x" ? setting.c_width : setting.c_height);
                // 清除定時器
                if (setting.ptr) {
                    clearInterval(setting.ptr);
                    setting.ptr = null;
                }
                childParent[0].ontouchmove = touchEvent.move;
            },
            move: function (moveEvent) {
                var movePo = touchEvent.getPosition(moveEvent);
                var moveX = movePo.x;
                var moveY = movePo.y;
                if (setting.direct == 'x') {
                    var x = moveX - touchEvent.startX;
                    // 橫坐標和縱坐標的差值超過10個像素，才給滑動
                    if (Math.abs(x) > Math.abs(moveY - touchEvent.startY)) {
                        // 阻止默認的事件
                        moveEvent.preventDefault();
                        if (setting.is3D) {
                            childParent.css({
                                "-webkit-transform": "translate3d(" + (parseFloat(touchEvent.currentPosition) + x) + "px,0px,0px)"
                            });
                        } else if (setting.transform) {
                            childParent.css({
                                "-webkit-transform": "translateX(" + (parseFloat(touchEvent.currentPosition) + x) + "px)"
                            });
                        } else {
                            childParent.css({
                                "left": parseFloat(touchEvent.currentPosition) + x
                            });
                        }
                        moveDirect = x > 0 ? "sub" : "add";
                    } else {
                        childParent[0].ontouchmove = null;
                        return;
                    }
                } else {
                    // Y軸方向滾動
                    moveEvent.preventDefault();
                    var y = moveY - touchEvent.startY;
                    if (setting.is3D) {
                        childParent.css({
                            "-webkit-transform": "translate3d(0px," + (parseFloat(touchEvent.currentPosition) + y) + "px,0px)"
                        });
                    } else if (setting.transform) {
                        childParent.css({
                            "-webkit-transform": "translateY(" + (parseFloat(touchEvent.currentPosition) + y) + "px)"
                        });
                    } else {
                        childParent.css({
                            "top": parseFloat(touchEvent.currentPosition) + y
                        });
                    }
                    moveDirect = y > 0 ? "sub" : "add";
                }
                childParent[0].ontouchend = touchEvent.end;
            },
            end: function () {
                //根據手指移動的方向，判斷下一個要顯示的節點序號
                if (moveDirect == "add") {
                    setNext();
                } else {
                    setPrev();
                }
                // 調用對應的處理函數
                setting.currentMethod.process();
                childParent[0].ontouchend = null;
                childParent[0].ontouchmove = null;
            },
            getPosition: function (evt) {
                var touch = evt.changedTouches ? evt.changedTouches[0] : evt;
                return {
                    x: touch.clientX,
                    y: touch.clientY
                }
            }
        }
        switch (setting.effect) {
        case "none":
            doScrollNone.init();
            break;
        case "scroll":
            doScrollXY.init();
            break;
        }

        // 一些初始化操作
        function doInit() {
            childParent.css("position", "relative");
            if (!setting.cycle) {
                prevBtn.removeClass(setting.btnDisable);
                nextBtn.removeClass(setting.btnDisable);
                if (setting.current == 0) {
                    prevBtn.addClass(setting.btnDisable);
                }
                if (setting.current == counts - 1) {
                    nextBtn.addClass(setting.btnDisable);
                }
            }
            // 判斷是否支持幾個屬性
            setting.transform = propertySupport.hasProperty("transform");
            setting.transition = propertySupport.hasProperty("transition");
            setting.is3D = propertySupport.isSupport3D();
            if (setting.effect != "none") {
                setting.current == 0 ? initImage() : loadImage();
            }
        }

        // 加載圖片，先加載第一個和最后一個圖
        function initImage() {
            var firstNode = childList.first();
            var lastNode = childList.last();
            getImg(firstNode.find("img"));
            getImg(lastNode.find("img"));
        }

        function getImg(img) {
            if (img.attr(setting.imgAttr)) {
                img.attr("src", img.attr(setting.imgAttr));
                img.removeAttr(setting.imgAttr);
            }
        }

        function loadImage() {
            var curNode = childList.eq(setting.current);
            getImg(curNode.find("img"));
        }

        function setPrev() {
            var cur = parseInt(setting.current, 10);
            var value = 0;
            switch (cur) {
            case 0:
                value = setting.cycle ? (setting.effect == "none" ? counts - 1 : -1) : 0;
                break;
            case -1:
                value = counts - 2;
                break;
            case counts:
                value = -1;
                break;
            default:
                value = cur - 1;
                break;
            }
            setting.current = value;
            if (setting.ptr) {
                clearInterval(setting.ptr);
                setting.ptr = null;
            }
        }

        function setNext() {
            var cur = parseInt(setting.current, 10);
            var value = 1;
            switch (cur) {
            case counts:
                value = 1;
                break;
            case -1:
                value = counts;
                break;
            case counts - 1:
                value = setting.cycle ? (setting.effect == "none" ? 0 : counts) : cur;
                break;
            default:
                value = cur + 1;
                break;
            }
            setting.current = value;
            if (setting.ptr) {
                clearInterval(setting.ptr);
                setting.ptr = null;
            }
        }
        /**
         * 綁定輪播事件
         */
        function bindEvent() {
            setting.nextBtn && nextBtn.bind("click", function () {
                // 如果按鈕已經被禁用
                if ($(this).hasClass(setting.btnDisable)) {
                    return;
                }
                setNext();
                $(this).addClass(setting.btnTouchClass);
                setting.currentMethod.process();
                return false;
            });
            setting.prevBtn && prevBtn.bind("click", function () {
                if ($(this).hasClass(setting.btnDisable)) {
                    return;
                }
                setPrev();
                $(this).addClass(setting.btnTouchClass);
                setting.currentMethod.process();
                return false;
            });
            childParent[0].ontouchstart = touchEvent.start;
        }
        /**
         * 自動輪播
         */
        function processAuto() {
            if (setting.ptr) {
                clearInterval(setting.ptr);
                setting.ptr = null;
            }
            // 設置輪播定時器
            setting.ptr = setInterval(function () {
                if (setting.current == counts) {
                    setting.current = 1;
                } else if (setting.current == counts - 1) {
                    setting.current = setting.cycle ? (setting.effect == "none" ? 0 : counts) : counts - 1;
                    if (!setting.cycle && setting.ptr) {
                        clearInterval(setting.ptr);
                        setting.ptr = null;
                    }
                } else {
                    setting.current = setting.current + 1;
                }
                setting.currentMethod.process();
            }, setting.timeFlag);
        }

        obj.setIndex = function (index) {
            if (index < 0) {
                index = 0;
            } else if (index >= counts) {
                index = counts - 1;
            }
            setting.current = index;
            setting.currentMethod.process();
        }
    }
}