<!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>
<title>jQuery炫酷翻頁圖片相冊</title>
<style>
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; }
</style>
<script src="/ajaxjs/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(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,//設(shè)置動畫的運動時間
Tick = 4000+speed,//設(shè)置定時器的間隔時間
n=1,//設(shè)置張數(shù)計數(shù)器
whichCl ,//設(shè)置判斷點擊了哪一個按鈕
z=0;//設(shè)置當(dāng)前動畫計數(shù)器
ImgSpan.html("第 "+n+" 張/共 "+ImgDiv.length+" 張");
function Slider(){//動畫函數(shù)
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();});//向右點擊事件啟動動畫函數(shù)
BtnPrve.click(prev_cl = function(){whichCl="prevCl";Slider();});//向左點擊事件啟動動畫函數(shù)
Btn.hover(function(){clearTimeout(autoTime)},function(){autoTime = setInterval(next_cl,Tick);})//當(dāng)鼠標進入點擊按鈕時對定時器進行控制
autoTime = setInterval(next_cl,Tick); //模擬向右點擊事件定時啟動動畫函數(shù)，也可以使用 prev_cl向左啟動動畫函數(shù)
});
</script>
</head>
<body>
<div class="img-box">
<span></span>
<div><a href="/"><img src="/jscss/demoimg/wall1.jpg" /></a></div>
<div><a href="/"><img src="/jscss/demoimg/wall2.jpg" /></a></div>
<div><a href="/"><img src="/jscss/demoimg/wall3.jpg" /></a></div>
<div><a href="/"><img src="/jscss/demoimg/wall4.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>
<div style="text-align:center;clear:both">
<p>適用瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
</div>
</body>
</html>
