在網頁設計中，給頁面添加一些動態效果是很重要的，可以提高用戶體驗。其中輪播圖是主流的一種，可以讓網站看起來更加生動。而用jQuery制作輪播圖則非常方便，下面我們來介紹一種無縫滾動的輪播圖效果。

$(function() {
var imgWidth = $(".img-list li").width(); //獲取輪播圖圖片寬度
setInterval(function(){
$(".img-list").animate({
marginLeft: -imgWidth
}, 1000, function() {
$(".img-list li").eq(0).appendTo($(".img-list"));
$(".img-list").css("marginLeft", 0);
});
}, 3000);//定時間隔為3秒
});

上述代碼中，我們先獲取了圖片的寬度，然后利用setInterval函數實現定時輪播。每隔3秒，執行一遍動畫。動畫的效果是將整個輪播圖ul向左移動一張圖片的寬度，然后通過回調函數把第一張圖片移到ul的末尾，同時讓ul的marginLeft為0，實現無縫滾動。

接下來，我們來看一下HTML結構，至于CSS就不在這里贅述了。

<div class="carousel">
<ul class="img-list">
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
<li><img src="4.jpg" alt=""></li>
<li><img src="5.jpg" alt=""></li>
<li><img src="6.jpg" alt=""></li>
</ul>
</div>

通過ul和li標簽的嵌套，將所有圖片放在ul里面，并設置好CSS屬性，就可以實現輪播圖的效果了。