基于 JQUERY 网页 banner
demo.html
<html>
<head>
<title>demo</title>
<link href="css/PaPaBanner.css" rel="stylesheet" />
<script src="jquery-1.8.2.js"></script> </head> <body> <div id="banner"> <div class="bannerImage" style="background-image: url(images/11.jpg);" data-url="http://www.baidu.com"></div> <div class="bannerImage" style=" background-image: url(images/12.jpg);" data-url=""></div> <div class="bannerImage" style=" background-image: url(images/13.jpg);" data-url="http://www.baidu.com"></div> <div class="bannerImage" style=" background-image: url(images/14.jpg);"></div> </div>
<script src="PaPaBanner.js"></script>
</body>
</html>
PaPaBanner.js
$(function () {
banner.init();
});
var config = {
bannerId: "banner",
height: 400,
autoPlayInterval:3000
};
var banner = {
index: 0,
count: 0,
init: function () {
var obj = this;
this.count = $("#" + config.bannerId + " .bannerImage").size();
$("#" + config.bannerId).height(config.height);
$("#" + config.bannerId + " .bannerImage").height(config.height);
this.setUrl();
this.setNavigator();
this.setNavigatorHover();
this.setIndex();
this.timer = setInterval(function () { obj.autoPlay(); }, config.autoPlayInterval);
},
autoPlay: function () {
this.index++;
if (this.index >= this.count) {
this.index = 0;
}
this.setIndex();
},
setIndex: function() {
$("#" + config.bannerId + " .btn li").eq(this.index).addClass("lihover").siblings("li").removeClass("lihover");
$("#" + config.bannerId + " .bannerImage").eq(this.index).fadeIn(2000).siblings("div").fadeOut(2000);
},
setUrl: function() {
$("#" + config.bannerId + " div").each(function () {
var url = $(this).attr("data-url");
if ($.trim(url) == "" || url == undefined) {
return;
}
$(this).append("<a href='" + url + "' style='display:block;height:" + config.height + "px;width:100%;' target='_blank' ></a>");
});
},
setNavigator: function() {
$("#" + config.bannerId).append("<ul class='btn'></ul>");
for (var i = 0; i < this.count; i++) {
$("#" + config.bannerId + " .btn").append("<li data-pos='" + i + "' ></li>");
}
},
setNavigatorHover: function () {
var obj = this;
$("#" + config.bannerId + " .btn li").hover(function () {
clearInterval(obj.timer);
obj.index = $(this).attr("data-pos");
obj.setIndex();
}, function () {
obj.timer = setInterval(function () { obj.autoPlay(); }, config.autoPlayInterval);
});
}
};
PaPaBanner.css
#banner {
width: 100%;
margin: 0;
padding: 0;
position: relative;
height: 500px;
}
.bannerImage {
width: 100%;
height: 500px;
position: absolute;
top: 0px;
left: 0px;
background-repeat: no-repeat;
}
#banner .btn{ position: absolute;left: 70%;bottom:10px; display:inline-block;margin: 0px 0px;padding:2px 10px; background-color:#ccc;border-radius:11px;}
.btn li{float:left;height:16px;width:16px;list-style: none;text-align: center;margin: 0px;padding: 0px;margin-left: 5px;background: url(../images/1.png) no-repeat ; }
.btn .lihover{ background: url(../images/2.png) no-repeat ; }
ok, https://github.com/jinshuai/PaPaBanner
基于 JQUERY 网页 banner的更多相关文章
- 基于Jquery的banner轮播插件,简单粗暴
新手练习封装插件,觉着在前端这一块的轮播比较多,各种旋转木马一类的3D旋转,技术不够,所以封装了一个简单的banner轮播插件,功能也比较简单,就是左右向的轮播. 先挂地址https://github ...
- 基于jquery打造的网页右侧自动收缩浮动在线客服代码
基于jquery打造的网页右侧自动收缩浮动在线QQ客服代码, 当前比较流行的一款QQ在线jquery特效代码, 代码中还带有IE6下PNG图片透明的特效,如果想研究IE6下PNG透明的同学也可以下载研 ...
- 基于jQuery仿QQ音乐播放器网页版代码
基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="m ...
- 基于jquery仿天猫分类导航banner切换
分享一款基于jquery天猫分类导航banner切换.这是一款仿最新天猫商品分类导航控制banner图片切换代码.效果图如下: 在线预览 源码下载 部分代码: <div class=&quo ...
- 基于jquery和svg超炫的网页动画
今天给大家分享一款基于jquery和svg超炫的网页动画.这款动画效果非常炫.下面还有重播.慢速.和反向动画按钮.效果非常漂亮.一起看下效果图: 在线预览 源码下载 实现的代码. html代码: ...
- 基于jQuery 常用WEB控件收集
Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...
- 一些基于jQuery开发的控件
基于jQuery开发,非常简单的水平方向折叠控件.主页:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-a ...
- 基于jQuery的自适应图片左右切换
效果预览:http://hovertree.com/code/jquery/smjv6d0n.htm 基于jQuery编写的横向自适应幻灯片切换特效 全屏自适应jquery焦点图切换特效,在IE6这个 ...
- 使用 Sticky-Kit 实现基于 jQuery 的元素固定效果
元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...
随机推荐
- Docker系列(九)Kubernetes安装
环境: A.B两天机器A机器IP:192.169.0.104,B机器IP:192.168.0.102,其中A为Master节点,B为Slave节点 操作系统:Centos7 Master与Slave节 ...
- fuse文件系统
用户空间文件系统(Filesystem in Userspace,简称FUSE)是操作系统中的概念,指完全在用户态实现的文件系统.目前Linux通过内核模块对此进行支持.一些文件系统如ZFS,glus ...
- hdu4436-str2int（后缀数组 or 后缀自动机）
题意:给你一堆字符串,仅包含数字'0'到'9'. 例如 101 123 有一个字符串集合S包含输入的N个字符串,和他们的全部字串. 操作字符串很无聊,你决定把它们转化成数字. 你可以把一个字符串转换成 ...
- Spark生态之Spark BlinkDB
- homework-05 服务器与客户端
首先非常抱歉第三次和第四次作业我没交上来,不想找借口强调原因,但是这两次作业我一定会补上,到时候会@助教.谢谢 回到这次作业! 这次作业邹老师没说博客的格式,所以在这里就没有什么回答问题的东西了.这次 ...
- [iOS基础控件 - 6.5] UITableView的数据刷新
A.需求 1.以LOL英雄列表为蓝本,给其加上实时修改英雄名称的功能 2.使用UIAlertView 3.全局刷新reloadData 4.局部刷新 B.实现 1.使用UIAlertView ...
- [Xcode使用 - 1] 自定义代码块引用
Xcode本身带有编码常用的代码块可供使用,如下图 例如 “if” 这个代码块的定义 调用方法 1.可以直接拖放带编辑区 2.使用快捷键,键入 “if”, Xcode就会出现自动完成的 ...
- android中常用的尺寸单位及其关系
1 尺寸单位定义 px(pixel,像素):每个px对应屏幕上的一个点 dip或dp(device independent pixels,设备独立像素):一种基于屏幕密度的抽象单位.在每英寸160个点 ...
- 写一个函数reverseList，该函数能够接受一个List，然后把该List 倒序排列。 例如： List list = new ArrayList(); list.add(“Hello”); list.add(“World”); list.add(“Learn”); //此时list 为Hello World Learn reverseList
package homework004; import java.util.ArrayList; import java.util.List; public class Daoxu { public ...
- 如何关闭log4j中配置的spring或者hibernate的日志信息
通常在建立一个web项目的时候,我们通常需要为其配置日志,以便了解启动过程中发生了什么,如果启动过程中发生了错误,则可以很方便的查看错误的信息,但是在项目部署到服务器上时,打印日志信息,需要耗费大量的 ...