jQuery輪播圖的左右切換是一種非常實用的功能，可以幫助頁面更好地展示圖片或內容。下面我們來介紹一下如何實現(xiàn)這個功能。

//HTML代碼
<div class="slider">
<ul class="slider-list">
<li><img src="img1.jpg"></li>
<li><img src="img2.jpg"></li>
<li><img src="img3.jpg"></li>
</ul>
<div class="slider-btn">
<span class="prev-btn"></span>
<span class="next-btn"></span>
</div>
</div>
//CSS代碼
.slider {
width: 800px;
height: 500px;
position: relative;
overflow: hidden;
}
.slider-list {
width: 2400px;
height: 500px;
position: absolute;
}
.slider-list li {
float: left;
width: 800px;
height: 500px;
}
.slider-btn {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
margin-top: -25px;
}
.prev-btn, .next-btn {
width: 50px;
height: 50px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
}
.prev-btn {
left: 0px;
}
.next-btn {
right: 0px;
}
//JS代碼
var num = 0;
var timer = null;
//移動函數(shù)
function move() {
$(".slider-list").stop().animate({left: -num * 800}, 500);
}
//自動播放函數(shù)
function autoplay() {
timer = setInterval(function() {
num++;
if(num > 2) {
num = 0;
}
move();
}, 2000);
}
autoplay();
//鼠標放入停止自動播放，移出開始自動播放
$(".slider").hover(function() {
clearInterval(timer);
}, function() {
autoplay();
});
//上一個按鈕點擊事件
$(".prev-btn").click(function() {
num--;
if(num < 0) {
num = 2;
}
move();
});
//下一個按鈕點擊事件
$(".next-btn").click(function() {
num++;
if(num > 2) {
num = 0;
}
move();
});

可以看到，實現(xiàn)jQuery輪播圖的左右切換需要通過CSS把圖片排列在一行，再通過JS實現(xiàn)移動圖片和自動播放、上一個和下一個按鈕的點擊事件。