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>&nbsp;</span><em>&lt;</em></p>
33     <p class="next"><span>&nbsp;</span><em>&gt;</em></p>
34     <li><i class="cover">&nbsp;</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>&nbsp;</span><em>主播昵称</em></p>
37     </li>
38     <li><i class="cover">&nbsp;</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>&nbsp;</span><em>主播昵称</em></p>
41     </li>
42     <li><i class="cover">&nbsp;</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>&nbsp;</span><em>主播昵称</em></p>
45     </li>
46     <li><i class="cover">&nbsp;</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>&nbsp;</span><em>主播昵称</em></p>
49     </li>
50     <li><i class="cover">&nbsp;</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>&nbsp;</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>
View Code

 

 

　　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 });
View Code

 

posted @ 2015-04-28 18:13  带上饼干  阅读(802)  评论(0)  编辑  收藏  举报