拉门循环滚动展示图片的动画写得多了，今天来一个平时少写的，先上图：
功能描述：
自定义图片尺寸；
每隔一段时间自动滚动图片；
每次动画执行的时候改变图片的位置，宽高以及其它属性也要跟随着变化；
鼠标移上图片，显示当前图片的详细信息；
点击按钮向前向后滚动；
注意：
因为用的是seajs写的，所以稍微需要留意下文件的加载啦
详细代码:
html代码:
1 <!DOCTYPE html> 2 <!-- saved from url=(0062)http://x1.xiuimg.com/style/xiu/woxiu/v1/tpl/topic/xiuxuan.html --> 3 <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 4 5 <title></title> 6 <style type="text/css"> 7 *{margin:0px; padding:0px;font-family:"Microsoft YaHei"} 8 ol,ul{list-style:none;} 9 cite,em,i{font-style:normal} 10 * html .clearfix { height: 1%; } 11 .clearfix { display: block; } 12 .myclearfix:after { clear:both; visibility:hidden;} 13 .myclearfix { display: block; _display:inline-block; overflow:hidden;} 14 15 #largerImages{position:relative;width:1000px;margin:0 auto;height:520px;overflow:hidden;} 16 #largerImages li{box-shadow:1px 1px 12px rgba(200, 200, 200, 1);width:368px;height:368px; position:absolute;top:10px;overflow:hidden;color:#fff;} 17 #largerImages li .cover{background-color:#333;opacity:0.5;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);height:100%;width:100%;display:block;position:absolute;top:0px;} 18 #largerImages img{border:0px;width:100%;height:100%;} 19 #largerImages .previous{left:13%;} 20 #largerImages .next{left:53%;} 21 #largerImages .previous,#largerImages .next{cursor:pointer; position:absolute;z-index:100; top:25%;height:60px;line-height:60px;width:30px;color:#fff;text-align:center;} 22 #largerImages .previous span,#largerImages .next span{position:absolute;top:0px;left:0px;height:100%;width:100%;display:block;background-color:#000;opacity:0.4;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);} 23 #largerImages .previous em,#largerImages .next em{height:100%;width:100%;display:block;position:absolute;top:0px;left:0px;font-size:26px; font-family: "宋体";} 24 #largerImages li span,#largerImages li em{position:absolute;left:0px;width:100%;height:30px;line-height:30px; bottom:0px;text-align:center;display:block;color:#fff;} 25 #largerImages li span{background-color:#000;opacity:0.5;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);font-size:12px;} 26 27 </style> 28 </head> 29 <body> 30 31 <ul id = "largerImages"> 32 <p class="previous"><span> </span><em><</em></p> 33 <p class="next"><span> </span><em>></em></p> 34 <li><i class="cover"> </i> 35 <a href="#"><img src="http://xiu.xiuimg.com/upload/xiu/9/90/qq-srntbvlhcw_b_56.com_160106133546.jpg"></a> 36 <p class="tab_name"><span> </span><em>主播昵称</em></p> 37 </li> 38 <li><i class="cover"> </i> 39 <a href="#"><img src="http://xiu.xiuimg.com/upload/xiu/96/58/dc15170219625_b_56.com_151201150445.jpg"></a> 40 <p class="tab_name"><span> </span><em>主播昵称</em></p> 41 </li> 42 <li><i class="cover"> </i> 43 <a href="#"><img src="http://xiu.xiuimg.com/upload/xiu/9/90/qq-srntbvlhcw_b_56.com_160106133546.jpg"></a> 44 <p class="tab_name"><span> </span><em>主播昵称</em></p> 45 </li> 46 <li><i class="cover"> </i> 47 <a href="#"><img src="http://xiu.xiuimg.com/upload/xiu/96/58/dc15170219625_b_56.com_151201150445.jpg"></a> 48 <p class="tab_name"><span> </span><em>主播昵称</em></p> 49 </li> 50 <li><i class="cover"> </i> 51 <a href="#"><img src="http://xiu.xiuimg.com/upload/xiu/9/90/qq-srntbvlhcw_b_56.com_160106133546.jpg"></a> 52 <p class="tab_name"><span> </span><em>主播昵称</em></p> 53 </li> 54 </ul> 55 56 <script type="text/javascript" src="../../lib/seajs/sea.js"></script> 57 <script type="text/javascript" src="../../lib/base/1.0.x/base.js"></script> 58 <script type="text/javascript"> 59 seajs.use(['lib/jquery/1.11.x/index.js','_example/rotateBox/index.js'],function($,carousel) { 60 carousel.init({ 61 wapper: $('#largerImages'), 62 63 //所有图片以此来按比例定义宽高 64 imgWidth: 450, 65 imgHeight: 300, 66 67 spacing: { 68 left: 60, //每张图片左边距离相差多少 69 top: 30, //每张图片顶部距离相差多少 70 width: 60, //每张图片宽度相差多少 71 height: 60 //每张图片高度相差多少 72 } 73 }); 74 }); 75 </script> 76 </body> 77 </html>