function changeImage() {
index++;
index=index%length;
$img.eq(index).fadeIn(300).siblings().fadeOut(300);
$lib.eq(index).addClass('on').siblings().removeClass('on');
}
//图片从右向左切换
function changeImageRighttoLeft() {
index--;
index=index<0?length:index;
$img.eq(index).fadeIn(300).siblings().fadeOut(300);
$lib.eq(index).addClass('on').siblings().removeClass('on');
}
//开启图片从左向右切换定时器
var intervalHandle = setInterval(changeImage,2000);
/**逻辑*/
//下一张点击时图片向右移动一张
$next.click(function () {
clearInterval(intervalHandle);
changeImage();
})
//下一张移除焦点时开启定时器
$next.hover(function () {
},function () {
clearInterval(intervalHandle);
intervalHandle = setInterval(changeImage,2000);
});
//上一张点击时图片向左移动一张
$prev.click(function () {
clearInterval(intervalHandle);
changeImageRighttoLeft();
})
//上一张移除焦点时开启定时器
$prev.hover(function () {
},function () {
clearInterval(intervalHandle);
intervalHandle = setInterval(changeImage,2000);
});
$lib.hover(function () {/*移入小圆点上*/
//关闭图片切换定时器
clearInterval(intervalHandle);
index=$(this).index();
$img.eq(index).fadeIn(300).siblings().fadeOut(300);
$lib.eq(index).addClass('on').siblings().removeClass('on');
},function () {
intervalHandle = setInterval(changeImage,2000);
});
$pic.hover(function () {
clearInterval(intervalHandle);
},function () {
intervalHandle = setInterval(changeImage,2000);
});
//图片点击事件
$pic.click(function () {
alert("index:"+index);
});
}
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery图片操作技巧大全》、《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
