js焦点图片层叠轮播切换滚动
拉门循环滚动展示图片的动画写得多了，今天来一个平时少写的，先上图：
功能描述：
自定义图片尺寸；
每隔一段时间自动滚动图片；
每次动画执行的时候改变图片的位置，宽高以及其它属性也要跟随着变化；
鼠标移上图片，显示当前图片的详细信息；
点击按钮向前向后滚动；
注意：
因为用的是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>
js 代码:
1 define(function(require, exports, module) { 2 'use strict'; 3 var $ = require('lib/jquery/1.11.x/index.js'); 4 5 var carousel = { 6 7 _initData:false, //判断动画是否执行完毕 8 9 init: function(options) { 10 var t = this; 11 t._wapper = options.wapper; 12 t._grids = t._wapper.find('li'); 13 t._gridsWidth = options.imgWidth; 14 t._gridsHeight = options.imgHeight; 15 t._spacing = options.spacing; 16 17 //取居中图片 18 t._middle = t._grids.length % 2 == 0 ? t._grids.length / 2 : parseInt(t._grids.length / 2); 19 20 //存放各图片参数 21 t._arr = { 22 left: [], 23 top: [], 24 zIndex: [], 25 width: [], 26 height: [] 27 } 28 29 if ( !t._initData ) { 30 var interval; 31 interval = setInterval(function(){ 32 $('.previous').click(); 33 },10000); 34 } 35 36 t._largerImages(); 37 t._reposition(); 38 t._mouseEnter(t._grids) //鼠标移动上去显示主播昵称 39 }, 40 //初始化定位： 41 _largerImages: function() { 42 var t = this; 43 44 var front = t._middle; 45 var avtive = t._middle; 46 var last = t._grids.length; 47 48 t._grids.each( function(i, img) { 49 50 if (i == t._middle) { 51 52 t._grids.eq(i).css({ 53 zIndex: 99, 54 top: 0, 55 left: t._spacing.left * i, 56 height: t._gridsHeight, 57 width: t._gridsWidth 58 }); 59 60 } else if ( i < t._middle ) { 61 62 t._grids.eq(i).css({ 63 zIndex: i, 64 top: t._spacing.top * front, 65 left: t._spacing.left * i, 66 height: t._gridsHeight - t._spacing.height * front, 67 width: t._gridsWidth - t._spacing.width * front 68 }); 69 70 front--; 71 72 } else { 73 74 last --; 75 76 t._grids.eq(last).css({ 77 zIndex: i, 78 top: t._spacing.top * avtive, 79 80 left: t._spacing.left * last + t._spacing.width * avtive, 81 height: t._gridsHeight - t._spacing.height * avtive, 82 width: t._gridsWidth - t._spacing.width * avtive 83 }); 84 85 avtive --; 86 }; 87 }); 88 }, 89 //翻页动画 90 _reposition: function() { 91 var t = this; 92 93 //把各属性值传到数组里面 94 t._grids.each( function(i,img) { 95 t._arr.left.push(t._grids.eq(i).position().left); 96 t._arr.top.push(t._grids.eq(i).position().top); 97 t._arr.width.push(t._grids.eq(i).width()); 98 t._arr.height.push(t._grids.eq(i).height()); 99 t._arr.zIndex.push(t._grids.eq(i).css('z-index')); 100 }); 101 102 //向前翻页 103 $('.previous').bind('click',function() { 104 if ( !t._initData && t._arr.left.length != 0) { 105 106 t._initData = true; 107 108 //重新获取选择器 109 var grids = t._wapper.find('li'); 110 111 for (var i = 1; i < grids.length ; i ++) { 112 113 grids.eq(i).animate({ 114 zIndex: t._arr.zIndex[i - 1], 115 left: t._arr.left[i - 1], 116 top: t._arr.top[i - 1], 117 width: t._arr.width[i - 1], 118 height: t._arr.height[i - 1], 119 },200, 120 function() { 121 t._initData = false; 122 grids.find('i').addClass('cover'); 123 grids.eq(t._middle + 1).find('i').removeClass('cover'); 124 }); 125 }; 126 127 grids.eq(0).animate({ 128 left: t._arr.left[ grids.length - 1], 129 top: t._arr.top[ grids.length - 1], 130 width: t._arr.width[ grids.length - 1], 131 height: t._arr.height[ grids.length - 1], 132 zIndex: t._arr.zIndex[ grids.length - 1] 133 },200, 134 function(){ 135 $(this).appendTo(t._wapper); 136 }); 137 138 } 139 }); 140 //向后翻页 141 $('.next').bind('click',function() { 142 if ( !t._initData && t._arr.left.length != 0) { 143 144 t._initData = true; 145 146 //重新获取选择器 147 var grids = t._wapper.find('li'); 148 149 for (var i = 0; i < grids.length - 1; i ++) { 150 grids.eq(i).animate({ 151 left: t._arr.left[i + 1], 152 top: t._arr.top[i + 1], 153 width: t._arr.width[i + 1], 154 height: t._arr.height[i + 1], 155 zIndex: t._arr.zIndex[i + 1] 156 },200,function() { 157 t._initData = false; 158 }); 159 }; 160 grids.eq(grids.length - 1).animate({ 161 left: t._arr.left[0], 162 top: t._arr.top[0], 163 width: t._arr.width[0], 164 height: t._arr.height[0], 165 zIndex: t._arr.zIndex[0] 166 },200, 167 function(){ 168 $(this).prependTo(t._wapper); 169 grids.find('i').addClass('cover'); 170 grids.eq(t._middle - 1).find('i').removeClass('cover'); 171 }); 172 173 } 174 }); 175 }, 176 //鼠标进入图片效果 177 _mouseEnter: function(grids) { 178 grids.each(function(i){ 179 $(this).mouseenter(function() { 180 $(this).find('.tab_name').animate({ 181 bottom:0,opacity: 'show' 182 },200); 183 }); 184 $(this).mouseleave(function() { 185 $(this).find('.tab_name').animate({ 186 bottom:-50,opacity: 'hide' 187 },200); 188 }); 189 }); 190 }, 191 }; 192 193 return carousel; 194 });