首页 / 脚本样式 / JavaScript / jQuery制作简洁的图片轮播效果

$（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）;}）;