使用JQ現實旋轉木馬超級簡單，它看起來很複雜，動畫好像很難實現，但其實不然。 效果圖： 這裡json是核心，只要變化json里數組的排序，就可以改變固定的圖片的寬、高、透明度、層級、位置，然後使用animate這個動畫方法實現到動畫的效果。 最近收集的輪播圖插件：傳送門 圖片滑動插件：superSi ...
使用JQ現實旋轉木馬超級簡單，它看起來很複雜，動畫好像很難實現，但其實不然。
效果圖：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>旋轉木馬</title> <style> ul{ list-style: none; margin: 0; padding: 0; } a{ text-decoration: none; color: #000; } .wrap{ width: 1200px; margin: 0 auto; } .slide{ width: 1200px; height: 500px; /*background: pink;*/ position: relative; } .slide ul li{ position: absolute; } .slide ul li img{ width: 100%; height: 100%; } .arrow a{ position: absolute; text-align: center; line-height: 76px; top: 50%; height: 76px; width: 112px; margin-top: -56px; font-size: 40px; font-weight: bold; z-index: 100; background: rgba(0,0,0,0.5); color: #fff; display: none; } .arrow a.pre{ left: 0; } .arrow a.next{ right: 0; } </style> </head> <body> <div class="wrap"> <div class="slide"> <ul> <li><img src="1.jpg" alt=""></li> <li><img src="2.jpg" alt=""></li> <li><img src="3.jpg" alt=""></li> <li><img src="4.jpg" alt=""></li> <li><img src="5.jpg" alt=""></li> </ul> <div class="arrow"> <a href="javascript:;" class="pre"><</a> <a href="javascript:;" class="next">></a> </div> </div> </div> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script> $(function(){ /*避免多次點擊出現bug，只能在點擊後動畫完後才能再點擊*/ var status=true; var timer=null; /*核心,把會變化的值存起來，然後動態迴圈這些值，然後添加到對應索引值的li標簽里*/ var json=[{ width:400, height:200, top:20, left:50, opacity:0.2, z:2 },{ width:600, height:300, top:70, left:0, opacity:0.8, z:3 },{ width:800, height:400, top:0, left:200, opacity:1, z:4 },{ width:600, height:300, top:70, left:600, opacity:0.8, z:3 },{ width:400, height:200, top:20, left:800, opacity:0.2, z:2 }]; move(); clearInterval(timer); timer=setInterval(function(){ move(true); },2000); $(".slide").hover(function(){ /*為什麼添加stop()，為了多次觸發不斷觸發BUG，所以每次觸發前都 *把之前的動畫停止掉 */ $(".arrow a").stop().fadeIn(); clearInterval(timer); },function(){ $(".arrow a").stop().fadeOut(); timer=setInterval(function(){ move(true); },2000); }) $(".arrow .pre").on("click",function(){ if(status){ status=false; move(true) } }); $(".arrow .next").on("click",function(){ if(status){ status=false; move(false) } }); function move(offOn){ /*一開始調用時沒有傳值，但會走動一下，所以要判斷沒傳值時，不走if語句里的內容*/ if(offOn!=undefined){ if(offOn){ /*使用數組刪除會返回刪除值，而它是刪除最後一個，所以就是 *返回最後一個值 ，然後數組的前追加*/ json.unshift(json.pop()); }else{ /*這個同樣原理，只是它是數組的後追加，把數組的第一個追加到最後*/ json.push(json.shift()); } } $.each(json,function(i,v){ /*歷遍json，添加到對應索引的li標簽，使用animate實現動畫效果*/ $(".slide ul li").eq(i).css("z-index",v.z).stop().animate({"width":v.width,"opacity":v.opacity,"left":v.left,"top":v.top,"height":v.height},500,function(){ /*這裡就是動畫完後執行的回調函數*/ status=true; }); }) } }) </script> </body> </html>
這裡json是核心，只要變化json里數組的排序，就可以改變固定的圖片的寬、高、透明度、層級、位置，然後使用animate這個動畫方法實現到動畫的效果。
最近收集的輪播圖插件：傳送門
圖片滑動插件：superSilde-傳送門
這是一款圖片滑動很齊全的插件，而且學習起來很簡單，源碼算是不難的那種，沒有使用很難讓人看的懂的模式。
