|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./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è)置當前動畫計數(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);})//當鼠標進入點擊按鈕時對定時器進行控制 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> |
|
|
來自： 岑經(jīng)滄海難為水 > 《JAVA》
