jQuery輪播圖是網頁設計中常見的一種效果。而首尾相連則是一種更加流暢的實現方式。

$(function(){
// 獲取輪播圖元素
var $banner = $('.banner');
// 獲取輪播圖列表
var $list = $banner.find('.banner-list');
// 獲取輪播圖項
var $items = $list.find('.banner-item');
// 獲取輪播圖數量
var len = $items.length;
// 獲取輪播圖項寬度
var itemWidth = $items.width();
// 獲取輪播圖索引
var index = 0;
// 設置輪播圖列表的寬度
$list.width(itemWidth * len);
// 復制第一個輪播圖項并添加到輪播圖列表尾部
var $cloneItem = $items.eq(0).clone();
$cloneItem.appendTo($list);
setInterval(function(){
index++;
$list.animate({left: -itemWidth * index}, 500, function(){
// 判斷輪播圖是否到達最后一張
if (index === len) {
// 瞬間切換到第一張
$list.css('left', 0);
// 重置索引
index = 0;
}
});
}, 2000);
});

上述代碼中，我們在輪播圖列表的尾部添加了第一張輪播圖項的克隆，這樣在輪播圖滑動到列表的最后一張時，我們可以瞬間切換到第一張輪播圖項，形成了首尾相連的效果。

通過這種方式實現的jQuery輪播圖能夠更加流暢地展示圖片，并且用戶體驗更加友好。在網頁設計中，我們可以很好地運用這種技巧，使得頁面效果更加優化。