基于 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 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...

随机推荐

javascript设计模式4
静态成员是直接通过类对象访问的 var Book=(function(){ var numOfBooks=0; function checkIsbn(isbn){ ... } return funct ...
HW5.32
public class Solution { public static void main(String[] args) { int n1 = (int)(Math.random() * 5 + ...
利用.htacess 实现重定向
步骤: 在网站目录下加入 .htaccess 文件中写 RewriteEngine On RewriteRule ^.*$ index.php 表示开启重写机制重写到 index.php 的文件
《数据通信与网络》笔记--QoS
QoS(Quality of Service)服务质量,是网络的一种安全机制, 是用来解决网络延迟和阻塞等问题的一种技术. 1.QoS参数衡量服务质量QoS的参数主要包括: 端到端延迟(Delay) ...
[css]《CSS知多少》
http://www.cnblogs.com/wangfupeng1988/p/4325007.html
在Win8 Mertro 中使用SQLite
在Win8 Mertro 中使用SQLite 分类: .net 开发 2012-09-19 18:17 1229人阅读评论(3) ...
第一个struts案例及分析
软件中的框架,是一种半成品: 我们项目开发需要在框架的基础上进行!因为框架已经实现了一些功能,这样就可以提高开发效率! Struts2 = struts1 + xwork (struts是基于MV ...
hadoop安装与WordCount例子
1.JDK安装下载网址: http://www.oracle.com/technetwork/java/javase/downloads/jdk-6u29-download-513648.html ...
通过Wifi调试Android应用
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
【22】将成员变量声明为private
1.为什么要将成员变量声明为private,语法一致性,只通过方法暴露接口. 2.使用方法,可以对成员变量更精确的控制.比如:为所有可能的实现提供弹性,不同实现可以替换:控制可读可写:验证约束条件:处 ...

基于 JQUERY 网页 banner

基于 JQUERY 网页 banner的更多相关文章

随机推荐

热门专题