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. [九度OJ]1113.二叉树(求完全二叉树任意结点所在子树的结点数)

    原题链接:http://ac.jobdu.com/problem.php?pid=1113 题目描述: 如上所示,由正整数1,2,3……组成了一颗特殊二叉树.我们已知这个二叉树的最后一个结点是n.现在 ...

  2. powerdesign的license key到期，解决办法

    到2013年9月24日为止我把这文件覆盖了都是行的!不行的请留言说明下! 下载地址:powerdesigner license key 15.1 找到安装目录,直接覆盖就行了!

  3. ./wls1036_linux32.bin: /lib/ld-linux.so.2: bad ELF interpreter

    [CentOS]安装软件:/lib/ld-linux.so.2: bad ELF interpreter解决   环境: [orangle@localhost Downloads]$ uname -m ...

  4. 纯CSS完美实现垂直水平居中的6种方式

    前言 由于HTML语言的定位问题,在网页中实现居中也不是如word中那么简单,尤其在内容样式多变,内容宽高不定的情况下,要实现合理的居中也是颇考验工程师经验的.网上讲居中的文章很多,但是都不太完整,所 ...

  5. delphi 删除目录和创建目录，临时文件夹

    获取用户当前的Windows临时文件夹function GetWinTempPath: string;varTempDir: array[0..255] of char;beginGetTempPat ...

  6. nyoj 69 数的长度

    数的长度 时间限制:3000 ms  |  内存限制:65535 KB 难度:1   描述 N!阶乘是一个非常大的数,大家都知道计算公式是N!=N*(N-1)······*2*1.现在你的任务是计算出 ...

  7. 转载Code First Migrations更新数据库架构的具体步骤

    [转载] Code First Migrations更新数据库结构的具体步骤 我对 CodeFirst 的理解,与之对应的有 ModelFirst与  DatabaseFirst ,三者各有千秋,依项 ...

  8. 用Modelsim仿真QuartusII综合后网表时库的添加方法(转)

    这两天做综合后仿真,发现FPGA器件库又不会加了,无奈上网找方法.说起来不好意思,很早就接触Modelsim这个仿真软件了,可是没有好好琢磨.把这两天找的方法贴出来,再加上自己的理解,以后忘了可以上博 ...

  9. OpenCV入门学习笔记

    OpenCV入门学习笔记 参照OpenCV中文论坛相关文档(http://www.opencv.org.cn/) 一.简介 OpenCV(Open Source Computer Vision),开源 ...

  10. home_work--用户登陆

    前提: 根据文本中的已有用户和密码,实现登陆的交互:在用户输入用户名后,会有一个检测用户是否被锁定的环节:如果用户三次密码输入错误,则该用户则会被添加到锁定文件中,无法登陆. 涉及到的知识点: 1.p ...