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”插件代码：
(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>
页面测试
jquery.BannerRotator.js的更多相关文章
- jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
- jQuery.template.js 简单使用
之前看了一篇文章<我们为什么要尝试前后端分离>,深有同感,并有了下面的评论: 我最近也和前端同事在讨论这个问题,比如有时候前端写好页面给后端了,然后后端把这些页面拆分成很多的 views, ...
- 修改 jquery.validate.js 支持非form标签
尝试使用markdown来写一篇blog,啦啦啦 源代码传送门:github 在特殊情况下我们使用jquery.validate.js对用户输入的内容做验证的时候,表单并不是一定包含在form之中,有 ...
- 表单验证插件之jquery.validate.js
提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...
- 延迟加载外部js文件，延迟加载图片（jquery.lazyload.js和echo,js）
js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...
- 初探jquery.slimscroll.js和iscroll5.js
网上关于实现各种滚动效果的插件不胜枚举,这里,我简单介绍一下自己用过的两款比较有代表性的插件: 1.jquery.slimscroll.js,需要先引入jquery类库,主要用于模拟传统的浏览器滚动条 ...
- 动态生成二维码插件 jquery.qrcode.js
前段时间做项目,需要动态生成一个二维码,于是就在网上找了一下发现一个jquery插件jquery.qrcode.js,所以今天就简单说一下这个插件的使用: jquery.qrcode.js是依赖jqu ...
- Jquery客户端校验——jquery.validate.js
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...
- 懒加载插件- jquery.lazyload.js
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
随机推荐
- rsync相关整理
第一部分 rsync服务端配置 1.下载安装 a. yum安装. yum install rsync b. 下载rsync安装文件安装 #tar zxvf rsync-2.6.9 ...
- GO的数组及切片
感觉在向PYTHON学一些数组方面的功能. package main import "fmt" func main() { ]], , , , , , , , , } ] fmt. ...
- 目测ZIP的压缩率
对word文件,能压到25% 对PDF文件,却只有90% 对压缩文件本身再压缩,几乎没有效果. 考虑到用户一般情况下只有正常的文档,取中位值66%是比较正常的情况,特别是在预估原文件大小的时候.
- (Data structure)Implement Trie && Add and Search Word
Implement Trie (Prefix Tree) Implement a trie with insert, search, and startsWith methods. Note:You ...
- CodeForces 19D Points
Pete and Bob invented a new interesting game. Bob takes a sheet of paper and locates a Cartesian coo ...
- warning: the `gets' function is dangerous and should not be used.(转)
今天在LINUX下编译C程序时,出现了:warning: the `gets' function is dangerous and should not be used. 这个warning. 百度之 ...
- C# - List操作- 去掉重复
ChangeList里面会有重复的数据,这时可以这样去掉重复的item // Remove duplicated info var dup = ChangeList.Where(item => ...
- 马士兵Servlet&Jsp学习
Servlet&JSP 1>http常见错误信息: 404--url地址找不找, 403--禁止访问 500--服务器内部错误 2>Servlet的生命周期: *生命全过 ...
- zoj 3706 Break Standard Weight（dp）
Break Standard Weight Time Limit: 2 Seconds Memory Limit: 65536 ...
- HDU 2025 查找最大元素
查找最大元素 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submis ...