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的更多相关文章

  1. 基于Jquery的banner轮播插件,简单粗暴

    新手练习封装插件,觉着在前端这一块的轮播比较多,各种旋转木马一类的3D旋转,技术不够,所以封装了一个简单的banner轮播插件,功能也比较简单,就是左右向的轮播. 先挂地址https://github ...

  2. 基于jquery打造的网页右侧自动收缩浮动在线客服代码

    基于jquery打造的网页右侧自动收缩浮动在线QQ客服代码, 当前比较流行的一款QQ在线jquery特效代码, 代码中还带有IE6下PNG图片透明的特效,如果想研究IE6下PNG透明的同学也可以下载研 ...

  3. 基于jQuery仿QQ音乐播放器网页版代码

    基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="m ...

  4. 基于jquery仿天猫分类导航banner切换

    分享一款基于jquery天猫分类导航banner切换.这是一款仿最新天猫商品分类导航控制banner图片切换代码.效果图如下: 在线预览   源码下载 部分代码: <div class=&quo ...

  5. 基于jquery和svg超炫的网页动画

    今天给大家分享一款基于jquery和svg超炫的网页动画.这款动画效果非常炫.下面还有重播.慢速.和反向动画按钮.效果非常漂亮.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: ...

  6. 基于jQuery 常用WEB控件收集

    Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...

  7. 一些基于jQuery开发的控件

    基于jQuery开发,非常简单的水平方向折叠控件.主页:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-a ...

  8. 基于jQuery的自适应图片左右切换

    效果预览:http://hovertree.com/code/jquery/smjv6d0n.htm 基于jQuery编写的横向自适应幻灯片切换特效 全屏自适应jquery焦点图切换特效,在IE6这个 ...

  9. 使用 Sticky-Kit 实现基于 jQuery 的元素固定效果

    元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...

随机推荐

  1. 怎么限制Google自动调整字体大小

    Google默认的字体大小是12px,当样式表中font-size<12px时,或者没有明确指定字体大小,则在chrome浏览器里字体显示是12px. 最近在写代码玩的时候,我也碰到了 在FF和 ...

  2. NOIP2004 合并石子

    二.合并果子 (fruit.pas/dpr/c/cpp) [问题描述] 在一个果园里,多多已经将所有的果子打了下来,而且按果子的不同种类分成了不同的堆.多多决定把所有的果子合成一堆. 每一次合并,多多 ...

  3. use tomcat to access the file cross the environment

    background: 项目中的一个小工具,是一个Cron Job ,每天去搜集下服务器Hadoop Job的运行状态,并生成一份报告发送给整个Team,生产报告的同时把相关的日志文件保存到固定的一台 ...

  4. Vmware Ubuntu 虚拟机下Android开发环境搭建

    概况: 1.安装jdk: 2.安装adt-bundle: 1.安装jdk 先下载linux下的jdk,我下的是 jdk-7u13-linux-i586 :然后解压,为方便,建个文件夹--/home/x ...

  5. android中OnItemClickListener的参数解释

    @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) {} ...

  6. drag and drop

    <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> func ...

  7. python 使用@property

    在绑定属性时,如果我们直接把属性暴露出去,虽然写起来很简单,但是,没办法检查参数,导致可以把成绩随便改: s = Student() s.score = 9999 这显然不合逻辑.为了限制score的 ...

  8. java Swing图形化界面

    学过java的人应该对java的图形化界面很是反感,特别是接触java不久的人.如果想和其他语言那样用鼠标拖拽,可以使用wondosbulider插件.但是用起来也不是那么方便.当然对于不乐意写代码的 ...

  9. Java 判断是否为汉字 判断是否为乱码 判断字符串是否为双整型数字 整数 数字

    /**  * 判断是否为汉字  *   * @param str  * @return  */ public static boolean isGBK(String str) {  char[] ch ...

  10. MFC——从实现角度分析微云界面

    在云计算时代之风吹来,很多互联网公司都在建云,提出云盘.云储存.云平台.云空间等等,骤然间,天下皆云.云是啥?有用户量,就有云,没有用户量,你的系统,你的云,也就是一朵白云. 最近研究了下微云的界面, ...