jquery.BannerRotator.js

2022-07-09 22:32:03

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

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

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

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

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

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

 (function($, window, document, undefined) {

     var Rotator = function(ele, opt) {

         this.$element = ele,

         this.defaults = {

             "millisec": 3000

         },

         this.options = $.extend({},

         this.defaults, opt);

         this.last_i = 0;

         this.current_i = 0;

         this.i_count = 0;

         this.li_cache = {};

         this.li_cache_btn = {};

         this.interval = {};

         this.li_cache = this.$element.find(".animation li");

         this.li_cache_btn = this.$element.find(".button li");

         this.i_count = this.li_cache.length; (function($this) {

             $this.li_cache_btn.each(function(index, element) {

                 $(this).bind("mousedown",

                 function() {

                     if ($this.index !== $this.last_i) {

                         $this.current_i = index;

                         clearInterval($this.interval);

                         $this.action();

                         $this.interval = setInterval($this.action.bind($this), $this.options.millisec)

                     }

                 })

             })

         })(this);

         this.action();

         this.interval = setInterval(this.action.bind(this), this.options.millisec)

     };

     Rotator.prototype = {

         action: function() {

             return (function($this) {

                 $this.li_cache.each(function(index, element) {

                     if ($this.last_i != $this.current_i && index === $this.last_i) {

                         $(element).find("[data-easing]").each(function(index, element) {

                             $(element).animate($.parseJSON(($(element).attr("data-from")).replace(/\'/g, '"')), $(element).attr("data-speed"), $(element).attr("data-easing"))

                         });

                         $($this.li_cache_btn[index]).removeClass("active")

                     }

                     if (index === $this.current_i) {

                         $(element).find("[data-easing]").each(function(index, element) {

                             $(element).animate($.parseJSON(($(element).attr("data-to")).replace(/\'/g, '"')), $(element).attr("data-speed"), $(element).attr("data-easing"))

                         });

                         $($this.li_cache_btn[index]).addClass("active")

                     }

                 });

                 if ($this.i_count === $this.current_i + 1) {

                     $this.last_i = $this.current_i;

                     $this.current_i = 0

                 } else {

                     $this.last_i = $this.current_i++

                 }

             } (this))

         }

     };

     $.fn.html5Rotator = function(options) {

         new Rotator(this, options)

     }

 })(jQuery, window, document);

jquery.bannerrotator.js

页面调用代码：

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>Banner Rotator</title>

 <style>

 #rotator { width: 100%; height: 400px; margin-bottom:32px; background: url(images/banner_bg.jpg); position: relative; }

 #rotator1 { width: 100%; height: 400px; background: url(images/banner_bg.jpg); position: relative; }

 .animation { width: inherit; height: inherit; position: relative; overflow: hidden; }

 ul, li { list-style: none; margin: 0; padding: 0; }

 .a-left { left: -500px; top: 50px; position: absolute;}

 .a-right { right: -500px; top: 50px; position: absolute;}

 .a-top { top: -500px; left: 500px; position: absolute;}

 .a-bottom { bottom: -500px; left: 500px; position: absolute;}

 .caption{padding:12px;}

 .absctraction{width:400px; height:225px; padding:12px;}

 .button { position: absolute; bottom: 0; right: 0; }

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

 .button li.active { background-color: #0cf; }

 </style>

 <script src="js/jquery-1.11.3.min.js"></script>

 <script src="js/jquery.easing.1.3.js"></script>

 <script src="js/jquery.BannerRotator.1.0.0.js"></script>

 <script>

 $(document).ready(function(e) {

     $('#rotator').html5Rotator({millisec:2000});

     $('#rotator1').html5Rotator({millisec:3000});

 });

 </script>

 </head>

 <body>

 <div id="rotator">

     <ul class="animation">

         <li>

             <div class="a-left" data-to="{'left': '250'}" data-from="{'left': '-500'}" data-speed="1000" data-easing="easeOutCubic">

                 <div class="img"><img src="data:images/dengziqi.jpg" width="121" height="140"></div>

             </div>

             <div class="a-top" data-to="{'top': '100'}" data-from="{'top': '-500'}" data-speed="1000" data-easing="easeOutCubic">

                 <div class="caption">邓紫棋</div>

                 <div class="absctraction">姓名：邓紫棋（原名：邓诗颖）

 生日：1991年8月16日（农历：辛未羊年七月初七）

 简介：邓紫棋（G.E.M.），原名邓诗颖，1991年8月16日生于中国上海，4岁移居香港，中国香港创作型女歌手。2008年7月10日...</div>

             </div>

         </li>

         <li>

             <div class="a-left" data-to="{'left': '250'}" data-from="{'left': '-500'}" data-speed="1000" data-easing="easeOutCubic">

                 <div class="img"><img src="data:images/fanbingbing.jpg" width="121" height="140" alt=" "></div>

             </div>

             <div class="a-bottom" data-to="{'bottom': '100'}" data-from="{'bottom': '-500'}" data-speed="1000" data-easing="easeOutCubic">

                 <div class="caption">范冰冰</div>

                 <div class="absctraction">生日：1981年9月16日

 简介：范冰冰，1981年9月16日生于山东青岛，电影演员、歌手，毕业于上海师范大学谢晋影视艺术学院。1996年参演电视剧《女强人》。1998年主演电视剧《还珠格格》系列成名，2001年起投...</div>

             </div>

         </li>

         <li>

             <div class="a-left" data-to="{'left': '250'}" data-from="{'left': '-500'}" data-speed="1000" data-easing="easeOutCubic">

                 <div class="img"><img src="data:images/yangmi.jpg" width="121" height="140"></div>

             </div>

             <div class="a-right" data-to="{'right': '400'}" data-from="{'right': '-500'}" data-speed="1000" data-easing="easeOutCubic">

                 <div class="caption">杨幂</div>

                 <div class="absctraction">生日：1986年9月12日

 简介：杨幂，1986年9月12日出生于北京，毕业于北京电影学院表演系2005级本科班。中国女演员、歌手、电视剧制片人。杨幂曾获得第24届、第26届中国电视金鹰奖提名，第17届上海电视节白...</div>

             </div>

         </li>

         <li>

             <div class="a-left" data-to="{'left': '250'}" data-from="{'left': '-500'}" data-speed="1000" data-easing="easeOutCubic">

                 <div class="img"><img src="data:images/lixiaolu.jpg" width="121" height="140"></div>

             </div>

             <div class="a-right" data-to="{'right': '400'}" data-from="{'right': '-500'}" data-speed="1000" data-easing="easeOutCubic">

                 <div class="caption">李小璐</div>

                 <div class="absctraction">生日：1981年9月30日

 简介：李小璐，1981年9月30日出生于安徽安庆（一说北京），毕业于北京美国英语语言学院，中国影视演员。1998年，17岁的...</div>

             </div>

         </li>

     </ul>

     <ul class="button">

         <li class="active"></li>

         <li></li>

         <li></li>

         <li></li>

     </ul>

 </div>

 <div id="rotator1">

     <ul class="animation">

         <li>

             <div class="a-left" data-to="{'left': '250'}" data-from="{'left': '-500'}" data-speed="1000" data-easing="easeOutCubic">

                 <div class="img"><img src="data:images/fanbingbing.jpg" width="121" height="140" alt=" "></div>

             </div>

             <div class="a-right" data-to="{'right': '400'}" data-from="{'right': '-500'}" data-speed="1000" data-easing="easeOutCubic">

                 <div class="caption">范冰冰</div>

                 <div class="absctraction">生日：1981年9月16日

 简介：范冰冰，1981年9月16日生于山东青岛，电影演员、歌手，毕业于上海师范大学谢晋影视艺术学院。1996年参演电视剧《女强人》。1998年主演电视剧《还珠格格》系列成名，2001年起投...</div>

             </div>

         </li>

         <li>

             <div class="a-left" data-to="{'left': '250'}" data-from="{'left': '-500'}" data-speed="1000" data-easing="easeOutCubic">

                 <div class="img"><img src="data:images/yangmi.jpg" width="121" height="140"></div>

             </div>

             <div class="a-right" data-to="{'right': '400'}" data-from="{'right': '-500'}" data-speed="1000" data-easing="easeOutCubic">

                 <div class="caption">杨幂</div>

                 <div class="absctraction">生日：1986年9月12日

 简介：杨幂，1986年9月12日出生于北京，毕业于北京电影学院表演系2005级本科班。中国女演员、歌手、电视剧制片人。杨幂曾获得第24届、第26届中国电视金鹰奖提名，第17届上海电视节白...</div>

             </div>

         </li>

         <li>

             <div class="a-left" data-to="{'left': '250'}" data-from="{'left': '-500'}" data-speed="1000" data-easing="easeOutCubic">

                 <div class="img"><img src="data:images/lixiaolu.jpg" width="121" height="140"></div>

             </div>

             <div class="a-right" data-to="{'right': '400'}" data-from="{'right': '-500'}" data-speed="1000" data-easing="easeOutCubic">

                 <div class="caption">李小璐</div>

                 <div class="absctraction">生日：1981年9月30日

 简介：李小璐，1981年9月30日出生于安徽安庆（一说北京），毕业于北京美国英语语言学院，中国影视演员。1998年，17岁的...</div>

             </div>

         </li>

     </ul>

     <ul class="button">

         <li class="active"></li>

         <li></li>

         <li></li>

     </ul>

 </div>

     <p class="test"> 简单粗鲁，不见怪<br>

         搞得分享，你们一定能用到，代码还用贴出么？<br>

         不懂不能问我哦，我先饭，你们一定懂的……<br>

         IE7以下的，就不用问了，过时的东西 <br>

 多个动画，记得复制设置外围div样式（如本例中的：rotator,rotator1）<br>

 背景动画，就不要我多废话吧，自己实现(很简单)，记得多动老子，:)))

 </p>

 </body>

 </html>

页面测试

上一篇：CentOS7 YUM安装与配置 MySQL5.7


下一篇：js文件上传下载组件