jQuery跑馬燈圖片輪播是一種常見的網頁設計效果，可以讓圖片在頁面上循環播放，增加頁面的美觀度和吸引力。下面介紹一下相關的代碼實現。

var index = 0; // 定義當前圖片的索引
var len = $(".slider li").length; // 定義圖片的數量
var timer = null; // 定義定時器
// 定義圖片切換函數
function slider() {
$(".slider li").eq(index).fadeIn(500).siblings().fadeOut(500);
$(".dot span").eq(index).addClass("active").siblings().removeClass("active");
}
// 定義自動切換函數
function autoSlider() {
timer = setInterval(function() {
index++;
if(index >= len) {
index = 0;
}
slider();
}, 3000);
}
// 定義左右箭頭切換函數
$(".prev").click(function() {
index--;
if(index < 0) {
index = len - 1;
}
slider();
});
$(".next").click(function() {
index++;
if(index >= len) {
index = 0;
}
slider();
});
// 定義圓點按鈕切換函數
$(".dot span").click(function() {
index = $(this).index();
slider();
});
// 頁面加載完成之后自動執行自動切換函數
$(function() {
autoSlider();
});

以上代碼實現了圖片輪播的基本操作，利用定時器來實現自動切換圖片，同時在頁面上添加左右輪播箭頭和圓點按鈕，方便用戶手動切換圖片。