你的位置:首页 > Java教程

[Java教程]jquery.BannerRotator.js


项目地址:https://github.com/snipertulip/BannerRotator

演示地址:http://snipertulip.github.io/BannerRotator/demo/

下载地址:https://github.com/snipertulip/BannerRotator/releases

纯js,图片动画轮播插件。

下面作为参考,具体代码,请去github.com下载,上面有链接地址。

“jquery.bannerrotator.js”插件代码:

 1 (function($, window, document, undefined) { 2   var Rotator = function(ele, opt) { 3     this.$element = ele, 4     this.defaults = { 5       "millisec": 3000 6     }, 7     this.options = $.extend({}, 8     this.defaults, opt); 9     this.last_i = 0;10     this.current_i = 0;11     this.i_count = 0;12     this.li_cache = {};13     this.li_cache_btn = {};14     this.interval = {};15     this.li_cache = this.$element.find(".animation li");16     this.li_cache_btn = this.$element.find(".button li");17     this.i_count = this.li_cache.length; (function($this) {18       $this.li_cache_btn.each(function(index, element) {19         $(this).bind("mousedown",20         function() {21           if ($this.index !== $this.last_i) {22             $this.current_i = index;23             clearInterval($this.interval);24             $this.action();25             $this.interval = setInterval($this.action.bind($this), $this.options.millisec)26           }27         })28       })29     })(this);30     this.action();31     this.interval = setInterval(this.action.bind(this), this.options.millisec)32   };33   Rotator.prototype = {34     action: function() {35       return (function($this) {36         $this.li_cache.each(function(index, element) {37           if ($this.last_i != $this.current_i && index === $this.last_i) {38             $(element).find("[data-easing]").each(function(index, element) {39               $(element).animate($.parseJSON(($(element).attr("data-from")).replace(/\'/g, '"')), $(element).attr("data-speed"), $(element).attr("data-easing"))40             });41             $($this.li_cache_btn[index]).removeClass("active")42           }43           if (index === $this.current_i) {44             $(element).find("[data-easing]").each(function(index, element) {45               $(element).animate($.parseJSON(($(element).attr("data-to")).replace(/\'/g, '"')), $(element).attr("data-speed"), $(element).attr("data-easing"))46             });47             $($this.li_cache_btn[index]).addClass("active")48           }49         });50         if ($this.i_count === $this.current_i + 1) {51           $this.last_i = $this.current_i;52           $this.current_i = 053         } else {54           $this.last_i = $this.current_i++55         }56       } (this))57     }58   };59   $.fn.html5Rotator = function(options) {60     new Rotator(this, options)61   }62 })(jQuery, window, document);

jquery.bannerrotator.js

页面调用代码:

 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Banner Rotator</title> 6 <style> 7 #rotator { width: 100%; height: 400px; margin-bottom:32px; background: url(images/banner_bg.jpg); position: relative; } 8 #rotator1 { width: 100%; height: 400px; background: url(images/banner_bg.jpg); position: relative; } 9 .animation { width: inherit; height: inherit; position: relative; overflow: hidden; } 10 ul, li { list-style: none; margin: 0; padding: 0; } 11 .a-left { left: -500px; top: 50px; position: absolute;} 12 .a-right { right: -500px; top: 50px; position: absolute;} 13 .a-top { top: -500px; left: 500px; position: absolute;} 14 .a-bottom { bottom: -500px; left: 500px; position: absolute;} 15 .caption{padding:12px;} 16 .absctraction{width:400px; height:225px; padding:12px;} 17 .button { position: absolute; bottom: 0; right: 0; } 18 .button li { float: left; width: 18px; height: 18px; margin-bottom: 6px; margin-right: 6px; border: 4px solid #fff; background-color: #ccc; border-radius: 18px; cursor:pointer;} 19 .button li.active { background-color: #0cf; } 20 </style> 21 <script src="js/jquery-1.11.3.min.js"></script> 22 <script src="js/jquery.easing.1.3.js"></script> 23 <script src="js/jquery.BannerRotator.1.0.0.js"></script> 24 <script> 25 $(document).ready(function(e) { 26   $('#rotator').html5Rotator({millisec:2000}); 27   $('#rotator1').html5Rotator({millisec:3000}); 28    29    30 }); 31 </script> 32 </head> 33  34 <body> 35 <div id="rotator"> 36   <ul class="animation"> 37     <li> 38       <div class="a-left" data-to="{'left': '250'}" data-from="{'left': '-500'}" data-speed="1000" data-easing="easeOutCubic"> 39         <div class="img"><img src="images/dengziqi.jpg" width="121" height="140"></div> 40       </div> 41       <div class="a-top" data-to="{'top': '100'}" data-from="{'top': '-500'}" data-speed="1000" data-easing="easeOutCubic"> 42         <div class="caption">邓紫棋</div> 43         <div class="absctraction">姓名:邓紫棋(原名:邓诗颖) 44 生日:1991年8月16日(农历:辛未羊年七月初七) 45 简介:邓紫棋(G.E.M.),原名邓诗颖,1991年8月16日生于中国上海,4岁移居香港,中国香港创作型女歌手。2008年7月10日...</div> 46       </div> 47     </li> 48     <li> 49       <div class="a-left" data-to="{'left': '250'}" data-from="{'left': '-500'}" data-speed="1000" data-easing="easeOutCubic"> 50         <div class="img"><img src="images/fanbingbing.jpg" width="121" height="140" alt=" "></div> 51       </div> 52       <div class="a-bottom" data-to="{'bottom': '100'}" data-from="{'bottom': '-500'}" data-speed="1000" data-easing="easeOutCubic"> 53         <div class="caption">范冰冰</div> 54         <div class="absctraction">生日:1981年9月16日 55 简介:范冰冰,1981年9月16日生于山东青岛,电影演员、歌手,毕业于上海师范大学谢晋影视艺术学院。1996年参演电视剧《女强人》。1998年主演电视剧《还珠格格》系列成名,2001年起投...</div> 56       </div> 57     </li> 58     <li> 59       <div class="a-left" data-to="{'left': '250'}" data-from="{'left': '-500'}" data-speed="1000" data-easing="easeOutCubic"> 60         <div class="img"><img src="images/yangmi.jpg" width="121" height="140"></div> 61       </div> 62       <div class="a-right" data-to="{'right': '400'}" data-from="{'right': '-500'}" data-speed="1000" data-easing="easeOutCubic"> 63         <div class="caption">杨幂</div> 64         <div class="absctraction">生日:1986年9月12日 65 简介:杨幂,1986年9月12日出生于北京,毕业于北京电影学院表演系2005级本科班。中国女演员、歌手、电视剧制片人。杨幂曾获得第24届、第26届中国电视金鹰奖提名,第17届上海电视节白...</div> 66       </div> 67     </li> 68     <li> 69       <div class="a-left" data-to="{'left': '250'}" data-from="{'left': '-500'}" data-speed="1000" data-easing="easeOutCubic"> 70         <div class="img"><img src="images/lixiaolu.jpg" width="121" height="140"></div> 71       </div> 72       <div class="a-right" data-to="{'right': '400'}" data-from="{'right': '-500'}" data-speed="1000" data-easing="easeOutCubic"> 73         <div class="caption">李小璐</div> 74         <div class="absctraction">生日:1981年9月30日 75 简介:李小璐,1981年9月30日出生于安徽安庆(一说北京),毕业于北京美国英语语言学院,中国影视演员。1998年,17岁的...</div> 76       </div> 77     </li> 78   </ul> 79   <ul class="button"> 80     <li class="active"></li> 81     <li></li> 82     <li></li> 83     <li></li> 84   </ul> 85 </div> 86 <div id="rotator1"> 87   <ul class="animation"> 88     <li> 89       <div class="a-left" data-to="{'left': '250'}" data-from="{'left': '-500'}" data-speed="1000" data-easing="easeOutCubic"> 90         <div class="img"><img src="images/fanbingbing.jpg" width="121" height="140" alt=" "></div> 91       </div> 92       <div class="a-right" data-to="{'right': '400'}" data-from="{'right': '-500'}" data-speed="1000" data-easing="easeOutCubic"> 93         <div class="caption">范冰冰</div> 94         <div class="absctraction">生日:1981年9月16日 95 简介:范冰冰,1981年9月16日生于山东青岛,电影演员、歌手,毕业于上海师范大学谢晋影视艺术学院。1996年参演电视剧《女强人》。1998年主演电视剧《还珠格格》系列成名,2001年起投...</div> 96       </div> 97     </li> 98     <li> 99       <div class="a-left" data-to="{'left': '250'}" data-from="{'left': '-500'}" data-speed="1000" data-easing="easeOutCubic">100         <div class="img"><img src="images/yangmi.jpg" width="121" height="140"></div>101       </div>102       <div class="a-right" data-to="{'right': '400'}" data-from="{'right': '-500'}" data-speed="1000" data-easing="easeOutCubic">103         <div class="caption">杨幂</div>104         <div class="absctraction">生日:1986年9月12日105 简介:杨幂,1986年9月12日出生于北京,毕业于北京电影学院表演系2005级本科班。中国女演员、歌手、电视剧制片人。杨幂曾获得第24届、第26届中国电视金鹰奖提名,第17届上海电视节白...</div>106       </div>107     </li>108     <li>109       <div class="a-left" data-to="{'left': '250'}" data-from="{'left': '-500'}" data-speed="1000" data-easing="easeOutCubic">110         <div class="img"><img src="images/lixiaolu.jpg" width="121" height="140"></div>111       </div>112       <div class="a-right" data-to="{'right': '400'}" data-from="{'right': '-500'}" data-speed="1000" data-easing="easeOutCubic">113         <div class="caption">李小璐</div>114         <div class="absctraction">生日:1981年9月30日115 简介:李小璐,1981年9月30日出生于安徽安庆(一说北京),毕业于北京美国英语语言学院,中国影视演员。1998年,17岁的...</div>116       </div>117     </li>118   </ul>119   <ul class="button">120     <li class="active"></li>121     <li></li>122     <li></li>123   </ul>124 </div>125 126   <p class="test"> 简单粗鲁,不见怪<br>127     搞得分享,你们一定能用到,代码还用贴出么?<br>128     不懂不能问我哦,我先饭,你们一定懂的……<br>129     IE7以下的,就不用问了,过时的东西 <br>130 多个动画,记得复制设置外围div样式(如本例中的:rotator,rotator1)<br>131 背景动画,就不要我多废话吧,自己实现(很简单),记得多动老子,:)))132 </p>133 </body>134 </html>

页面测试