非常感谢网友耀管家的无私分享，此作品是一款宣传册图片播放jquery插件，实现了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 = 8000+speed,//设置定时器的间隔时间
n=1,//设置张数计数器
whichCl ,//设置判断点击了哪一个按钮
z=0;//设置当前动画计数器
$(".bg").css({ opacity:0.1});
$(".bglogo").css({opacity:0.2});
$(".zhezhu").css({opacity:0.8});
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:100},speed,function(){$(this).stop().animate({left:0},speed)})
}
BtnNext.click(next_cl = function(){whichCl="nextCl";Slider();});//向右点击事件启动动画函数
BtnPrve.click(prev_cl = function(){whichCl="prevCl";Slider();});//向左点击事件启动动画函数
ImgBox.hover(function(){clearTimeout(autoTime)},function(){autoTime = setInterval(zd,Tick);})//当鼠标进入点击按钮时对定时器进行控制
function zd(){
if($(".zidong").is(":checked"))
{
next_cl()
}
}
autoTime = setInterval(zd,Tick); //模拟向右点击事件定时启动动画函数，也可以使用 prev_cl向左启动动画函数
$(".zhezhu").slideUp(Tick*2);
});
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
网友耀管家 滚动特效 图片滚动 图片播放 Jquery相册 QQ相册