使用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=[{ 400, height:200, top:20, left:50, opacity:0.2, z:2 },{ 600, height:300, top:70, left:0, opacity:0.8, z:3 },{ 800, height:400, top:0, left:200, opacity:1, z:4 },{ 600, height:300, top:70, left:600, opacity:0.8, z:3 },{ 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-传送门
这是一款图片滑动很齐全的插件，而且学习起来很简单，源码算是不难的那种，没有使用很难让人看的懂的模式。