jQuery图片实现无缝轮播的事例:
HTML代码部分
JQuery代码部分
//图片轮播滚动
$(function(){
//获取图片滚动的索引
var index = 0;
//获取图片的高度
var height = $(".content_right .ad").height();
//获取图片的数量个数
var count = $(".slider li").length;
//图片滚动的定时器
timer = setInterval(function () {
//图片高度的索引
changeImg(index);
//递加
index++;
//判断索引值等于图片的数量个数时为0
if (index == count) {
index = 0;
}
}, 2000);
//鼠标触发数字时,图片暂停,会随之点击改变
$(".num li").mouseover(function () {
//当前数字li的索引
index = $(this).index();
changeImg(index);
});
//设定div的悬停事件
$(".ad").hover(function () {
//清除图片的定时器
clearInterval(timer);
}, function () {//鼠标移出图片滚动
timer = setInterval(function () {
//图片高度的索引
changeImg(index);
//递加
index++;
//判断索引值等于图片的数量个数时为0
if (index==count) {
index = 0;
}
},2000);
})
//封装当前图片的索引
function changeImg(index) {
//var height = $(".content_right .ad").height();
//ul图片滚动,改变top的高,top值的高度*索引的值
$(".slider").stop(true, false).animate({ top: -height * index }, 1000);
//数字滚动的方式与图片一致
$(".num li").removeClass("on").eq(index).addClass("on");
}
});