实现了jquery智能炫酷的翻页相册,巧妙的运用Html的文档属性,大大减少jQ 的代码量,实现了智能炫酷的翻页相册、兼容性很好、实现了代码与标签的完全分离,可以随意的增删照片数量。。。。
首先引用代码
<link rel="stylesheet" type="text/css" href="css.css">
<script src="jquery.min.js"></script>
<script type="text/javascript" src="js.js"></script>
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向左启动动画函数
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791