演示图：

核心代码：

$(文档)。ready(function(){ var $iBox=$(').imgBox ')，$iNum=$(' .imgNum ')，//缓存优化indexImg=1，//初始下标totalImg=4，//图片总数量imgSize=300，//图片尺寸宽度moveTime=1100，//切换动画时间setTime=2500，//中间暂停时间clc=null函数moveImg(){ if(indexImg！=总毫克数){ $ ibox。动画({ left :-(indexImg * imgSize)' px ' }，移动时间)；$iNum.removeClass('标记颜色').eq(indexImg).添加CLaSS(' mark-color ')；index img } else { index img=1；$iNum.removeClass('标记颜色').等式(indexImg - 1).添加CLaSS(' mark-color ')；$iBox.animate({ left: 0 }，移动时间)；} } $ InUM。hover(function(){ $ IBox。stop()；//结束当前动画clearInterval(CLC)；//暂停循环$ Inum。移除类(' mark-color ')；$(这个)。添加CLaSS(' mark-color ')；indexImg=$(this).index()；$ ibox。动画({ left :-(indexImg * imgSize)' px ' }，500)；}，function(){ CLC=setInterval(moveImg，setTime)；});clc=setInterval(moveImg，setTime)；});以上所述就是本文的全部内容了，希望大家能够喜欢。