jQuery輪播圖插件代碼深度解析：自動輪播、手動切換、無限循環核心邏輯

代碼架構概覽

該插件實現了功能完整的輪播圖組件，支持：

• 自動定時輪播 (4秒間隔)
• 手動點擊切換 (上一頁/下一頁/圓點)
• 無限循環 / 來回切換 兩種模式
• 鼠標懸停暫停、移出恢復
• 動畫過渡效果 (左滑/右滑)

核心模塊解析

1. 入口綁定

$("div[data-scro='controler'] b, div[data-scro='controler2'] a").click(function(){
    var T = $(this);
    if(T.attr("class")=="down") return false; // 當前項不重複觸發
    
    J2ROLLING_ANIMATION.st({
        findObject: T,           // 觸發元素
        main: T.parent().parent().find("div[data-scro='list']"), // 輪播容器
        pagSource: T.parent().parent().find("div[data-scro='controler'] b"), // 圓點
        className: "down",       // 激活樣式
        duration: "slow",        // 動畫速度
        on: $(this)[0].tagName=="A" // 判斷模式：A標簽=無限循環
    });
    return false;
});

2. 動畫核心邏輯

animate: function(T, M, C, S, P, O) {
    // 獲取當前激活項索引
    var _prevDown = O ? P.parent().find("*[class='"+C+"']") : T.parent().find(T[0].tagName+"[class='"+C+"']");
    var _prevIndex = _prevDown.index();
    var _thisIndex = O ? (T.attr("class")=="next" ? _prevIndex+1 : _prevIndex-1) : T.index();
    var _list = M.find(".item");
    
    // 方向判斷
    var p2n = 1; // 1=向左, false=向右
    if(T.attr("class")=="prev" || _thisIndex < _prevIndex) p2n = false;
    if((T.attr("class")=="next" || _thisIndex > _prevIndex) && T.attr("class")!="prev") p2n = true;
    
    // 無限循環邊界處理
    if(O) {
        if(_thisIndex==-1) _thisIndex=_list.size()-1;
        if(_thisIndex==_list.size()) _thisIndex=0;
        P.eq(_thisIndex).addClass(C);
    } else {
        T.addClass(C);
    }
    _prevDown.removeClass(C);
    
    // 動畫執行
    !p2n ? _list.eq(_thisIndex).css("left", -M.width()) : '';
    _list.eq(_prevIndex).animate({left: p2n ? -M.width() : M.width()}, S, function(){
        $(this).removeAttr("style");
        J2Time = true; // 釋放鎖
    });
    _list.eq(_thisIndex).animate({left: "0px"}, S);
}

3. 自動輪播定時器

time: function() {
    J2SETTIME = window.setInterval(function(){
        var num = $("#section-focus-pic div[data-scro='controler'] b[class='down']").index();
        var _list = $("#section-focus-pic div[data-scro='list'] li");
        
        _list.eq(num).animate({"left": -$("#section-focus-pic div[data-scro='list']").width()}, "slow", function(){
            $(this).removeAttr("style");
            $("#section-focus-pic div[data-scro='controler'] b").removeClass("down").eq(num).addClass("down");
        });
        
        num++; if(num==_list.size()) num=0;
        _list.eq(num).animate({"left": "0px"}, "slow");
    }, 4000);
}

關鍵設計模式

現代化重構建議

1. 使用 ES6 Class 重構組件結構
2. 採用 CSS Transform 替代 left 動畫 (GPU加速)
3. 使用 IntersectionObserver 檢測可見性控制自動播放
4. 支持 Touch 事件實現移動端滑動切換
5. 提供 TypeScript 類型定義

參考資源

更多輪播圖實現方案：jQuery輪播圖多種實現方式總結