首先非常感谢网友淡如水的无私分享，这是他分享到JquerySchool网站上的第一款作品，实现了jquery智能炫酷的翻页相册，巧妙的运用Html的文档属性，大大减少jQ 的代码量，实现了智能炫酷的翻页相册、兼容性很好、实现了代码与标签的完全分离，可以随意的增删照片数量。。。。
jquery插件代码如下：
$(document).ready(function(e) {
var ImgBox = $(".img-box"),
ImgSpan = ImgBox.find("span"),
ImgDiv = $(".img-box div"),
BtnNext = $("#btn-next"),
BtnPrve = $("#btn-prev"),
Btn = $(".btn"),
speed = 600,
//设置动画的运动时间
Tick = 4000 + speed,
//设置定时器的间隔时间
n = 1,
//设置张数计数器
whichCl,
//设置判断点击了哪一个按钮
z = 0; //设置当前动画计数器
ImgSpan.html("第 " + n + " 张/共 " + ImgDiv.length + " 张");
function Slider() { //动画函数
if (whichCl == "nextCl") {
n++;
if (n > ImgDiv.length) {
n = 1;
}
z--;
if (z < 0) {
z = ImgDiv.length - 1;
}
}
if (whichCl == "prevCl") {
n--;
if (n < 1) {
n = ImgDiv.length;
}
}
ImgSpan.html("第 " + n + " 张/共 " + ImgDiv.length + " 张");
ImgDiv.eq(z).stop().animate({
right: -(1.1 * ImgDiv.width())
},
speed,
function() {
if (whichCl == "nextCl") {
ImgSpan.after($(this));
}
if (whichCl == "prevCl") {
ImgBox.append($(this));
}
$(this).stop().animate({
right: 0
},
speed);
}) if (whichCl == "prevCl") {
z++;
if (z > ImgDiv.length - 1) {
z = 0;
}
}
ImgBox.stop().animate({
right: 100
},
speed,
function() {
$(this).stop().animate({
right: 0
},
speed)
}) ImgSpan.stop().animate({
left: 395
},
speed,
function() {
$(this).stop().animate({
left: 295
},
speed)
})
}
BtnNext.click(next_cl = function() {
whichCl = "nextCl";
Slider();
}); //向右点击事件启动动画函数
BtnPrve.click(prev_cl = function() {
whichCl = "prevCl";
Slider();
}); //向左点击事件启动动画函数
Btn.hover(function() {
clearTimeout(autoTime)
},
function() {
autoTime = setInterval(next_cl, Tick);
}) //当鼠标进入点击按钮时对定时器进行控制
autoTime = setInterval(next_cl, Tick); //模拟向右点击事件定时启动动画函数，也可以使用 prev_cl向左启动动画函数
});
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
网友淡如水 图片轮播 图片播放 Jquery相册 QQ相册