标签：
项目地址：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 = 0 53 } 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);
页面调用代码：
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>
标签：
原文地址：http://www.cnblogs.com/Weasel/p/4800404.html
