jQuery智能炫酷的翻页相册特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery智能炫酷的翻页相册特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery智能炫酷的翻页相册</title>
<link rel="stylesheet" type="text/css" href="css/css.css"/>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
</head>
<body>
<div class="img-box">
         <span></span>
          <div><a href="#"><img src="images/1.jpg" /></a></div>
          <div><a href="#"><img src="images/2.jpg" /></a></div> 
          <div><a href="#"><img src="images/3.jpg" /></a></div>
          <div><a href="#"><img src="images/2.jpg" /></a></div>
</div>
<div class="btn-box">
    <div class="btn-margin">
        <div class="btn" id="btn-prev">上一张</div>
        <div class="btn" id="btn-next">下一张</div>
    </div>
</div>
</body>
</html>

JS代码(js.js):

// JavaScript Document$(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向左启动动画函数}
);

CSS代码(css.css):

@charset "utf-8";/* CSS Document */
body{overflow:hidden;}
a{text-decoration:none;color:#FFF;}
a img{border:none;}
.img-box,.img-box div,.img-box div img{width:800px;height:450px;}
.img-box{margin:auto;position:relative;}
.img-box span{position:absolute;bottom:0;left:295px;width:201px;font-size:12px;line-height:25px;color:#FFF;z-index:100;background:#555;text-align:center;}
.img-box div{position:absolute;cursor:all-scroll}
.btn-box{width:800px;height:40px;margin:auto;cursor:pointer;background:#222;}
.btn-margin{width:210px;height:40px;margin:auto;}
.btn{width:100px;height:38px;line-height:38px;margin:1px 1px 0 0;text-align:center;float:left;color:#FFF;background:#555;}

附件:下载该文件资源,减少时间成本(增值服务)