演示图：
核心代码：
$(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);});
以上所述就是本文的全部内容了，希望大家能够喜欢。