jQuery一行代碼實現圖片無縫輪播動畫：面試題深度解析

面試題

「如何用一行jQuery實現圖片無縫輪播動畫？」

HTML結構

<div class="slide">
  <img src="1.png"><img src="2.png"><img src="3.png"><img src="4.png">
</div>

「一行代碼」真相

純jQuery無法在真正意義上「一行」實現完整輪播（含無縫循環、鼠標暫停、自動播放、響應式等）。面試考察的是：

1. 對動畫原理的理解
2. 代碼簡潔度與可讀性的平衡
3. 是否知道現成插件/組件

核心動畫原理（原生JS實現）

var speed = 30;
var gpic = document.getElementById('slide');
var gpic1 = gpic.children[0]; // 圖片容器1
var gpic2 = gpic.children[1]; // 圖片容器2（克隆）

gpic2.innerHTML = gpic1.innerHTML; // 複製內容實現無縫

function Marquee() {
    if (gpic2.offsetWidth - gpic.scrollLeft <= 0) {
        gpic.scrollLeft -= gpic1.offsetWidth; // 重置位置
    } else {
        gpic.scrollLeft++; // 像素級滾動
    }
}

var timer = setInterval(Marquee, speed);

gpic.onmouseover = function() { clearInterval(timer); };
gpic.onmouseout = function() { timer = setInterval(Marquee, speed); };

jQuery優化版（多行但優雅）

$('.slide').each(function() {
    var $this = $(this), $imgs = $this.children('img');
    var html = $imgs.clone().add($imgs.clone()); // 雙倍確保無縫
    $this.empty().append(html).css({overflow: 'hidden', whiteSpace: 'nowrap'});
    
    var width = $imgs.first().outerWidth(true) * $imgs.length;
    var pos = 0;
    
    function animate() {
        pos -= 1;
        if (Math.abs(pos) >= width) pos = 0;
        $this.scrollLeft(-pos);
        requestAnimationFrame(animate);
    }
    
    $this.hover(function() { cancelAnimationFrame(animate); }, animate);
    animate();
});

生產環境建議

面試回答策略

1. 先說原理：「雙倍DOM+scrollLeft動畫+邊界重置」
2. 再說工程化：「生產用Swiper，面試可寫核心邏輯」
3. 最後說優化：「requestAnimationFrame、GPU加速、內存洩漏防護」

面試造火箭，工作拧螺絲——理解原理比背誦「一行代碼」更有價值。