- 使用jquery實現的圖片前後切換特效，類似翻頁的效果，在此要注意，選用jquery-1.9.1.min.js以上版本纔可以，兼容的瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲遊、搜狗、世界之窗。
-
<!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,//設置動畫的運動時間 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向左啓動動畫函數 }); </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>
jQuery炫酷翻頁圖片相冊
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章