jQuery制作簡潔的圖片輪播效果

 演示圖：

核心代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 $(document).ready(function(){ var $iBox = $('.imgBox'), $iNum = $('.imgNum'), //緩存優化 indexImg = 1, //初始下標 totalImg = 4, //圖片總數量 imgSize = 300, //圖片尺寸 寬度 moveTime = 1100, //切換動畫時間 setTime = 2500, //中間暫停時間 clc = null;   function moveImg(){ if(indexImg != totalImg){ $iBox.animate({ left: -(indexImg*imgSize) + 'px' }, moveTime); $iNum.removeClass('mark-color') .eq(indexImg) .addClass('mark-color'); indexImg++; } else{ indexImg = 1; $iNum.removeClass('mark-color') .eq(indexImg - 1) .addClass('mark-color'); $iBox.animate({ left: 0 }, moveTime); } } $iNum.hover(function(){ $iBox.stop(); //結束當前動畫 clearInterval(clc); //暫停循環 $iNum.removeClass('mark-color'); $(this).addClass('mark-color'); indexImg = $(this).index(); $iBox.animate({ left: -(indexImg*imgSize) + 'px' }, 500); },function(){ clc = setInterval(moveImg, setTime); });   clc = setInterval(moveImg, setTime); });