jQuery觸屏旋轉木馬是一種常用的輪播圖效果，在移動端的網站中經常使用。使用jQuery實現這種效果能夠較為方便地控制旋轉木馬的行為，而有了觸屏事件的支持，更加符合移動設備的用戶體驗。

// HTML結構
<div class="carousel">
<ul>
<li><img src="image1.jpg" alt="" /></li>
<li><img src="image2.jpg" alt="" /></li>
<li><img src="image3.jpg" alt="" /></li>
</ul>
</div>
// CSS樣式
.carousel {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel ul {
position: relative;
width: 300%;
left: -100%;
display: flex;
flex-wrap: nowrap;
transition: left 0.5s;
}
.carousel li {
width: 100%;
}
// JS代碼
$(function() {
// 觸屏事件
var startX;
var startY;
$(".carousel").on("touchstart", function(e) {
startX = e.originalEvent.changedTouches[0].pageX;
startY = e.originalEvent.changedTouches[0].pageY;
});
$(".carousel").on("touchend", function(e) {
var endX = e.originalEvent.changedTouches[0].pageX;
var endY = e.originalEvent.changedTouches[0].pageY;
var distanceX = endX - startX;
var distanceY = endY - startY;
// 判斷滑動方向
if (Math.abs(distanceX) > Math.abs(distanceY)) {
// 水平滑動
if (distanceX > 0) {
// 向右滑動
$(".carousel ul").animate({
left: "0%"
}, 500);
} else {
// 向左滑動
$(".carousel ul").animate({
left: "-200%"
}, 500);
}
}
});
// 自動輪播
setInterval(function() {
$(".carousel ul").animate({
left: "-200%"
}, 500, function() {
$(".carousel ul").css("left", "-100%");
$(".carousel ul li:first-child").appendTo(".carousel ul");
});
}, 3000);
});