隨著移動互聯網的發展，越來越多的人選擇使用手機瀏覽網頁。因此，為手機端設計一個優質的用戶體驗成為了每個網站開發者必不可少的任務之一。而使用jQuery觸屏手機幻燈片，不僅可以增加頁面的美觀度和交互性，更可以提高用戶的使用感受。

$(document).ready(function(){
// 定義一個變量，記錄當前顯示的圖片編號
var current = 0;
// 獲取圖片數量
var length = $('#slider ul li').length;
// 設置定時器，每隔3秒自動切換圖片
var timer = setInterval(changeImg, 3000);
// 定義圖片切換函數
function changeImg(){
// 將當前圖片隱藏
$('#slider ul li').eq(current).hide();
// 將下一張圖片顯示
current = (current+1)%length;
$('#slider ul li').eq(current).show();
}
// 當點擊左箭頭時，切換到前一張圖片
$('#slider .prev').click(function(){
clearInterval(timer);
$('#slider ul li').eq(current).hide();
current = (current-1+length)%length;
$('#slider ul li').eq(current).show();
timer = setInterval(changeImg, 3000);
});
// 當點擊右箭頭時，切換到下一張圖片
$('#slider .next').click(function(){
clearInterval(timer);
$('#slider ul li').eq(current).hide();
current = (current+1)%length;
$('#slider ul li').eq(current).show();
timer = setInterval(changeImg, 3000);
});
});

以上代碼定義了一個變量current，用于記錄當前顯示的圖片編號，還定義了定時器timer，每隔3秒自動切換圖片。當點擊左箭頭或右箭頭時，會分別切換到前一張或下一張圖片，并重新啟動定時器。代碼中通過eq()方法獲取指定的元素，而%運算符則用于保證current不會超出圖片數量。

最后，在HTML文檔中添加相應的標記，如<div id="slider">...</div>、<ul>...</ul>、<li>...</li>等，就可以創建一個簡單的觸屏手機幻燈片。