演示图：
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);
});
更多信息请查看IT技术专栏
