拉门循环滚动展示图片的动画写得多了，今天来一个平时少写的，先上图：

 

 

 

 

 

功能描述：

　　自定义图片尺寸；

　　每隔一段时间自动滚动图片；

　　每次动画执行的时候改变图片的位置，宽高以及其它属性也要跟随着变化；

　　鼠标移上图片，显示当前图片的详细信息；

　　点击按钮向前向后滚动；

 

注意：

　　因为用的是seajs写的，所以稍微需要留意下文件的加载啦

 

详细代码:

　　html代码:

1  2 
       3 
       4  5  6 28 29 30 31 
      
       32     
       
 <
33     
       
 >
34     
       
 35         36         
 主播昵称
37     
38     
       
 39         40         
 主播昵称
41     
42     
       
 43         44         
 主播昵称
45     
46     
       
 47         48         
 主播昵称
49     
50     
       
 51         52         
 主播昵称
53     
54 
      
55 56 57 58 76 77 

 

 

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