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. codeforce 605BE. Freelancer's Dreams

    题意:给你n个工程,做了每个工程相应增长x经验和y钱.问你最少需要多少天到达制定目标.时间可以是浮点数. 思路:杜教思路,用对偶原理很简易.个人建议还是标准解题法,凸包+线性组合. #include& ...

  2. Windows性能监视器之CPU、硬盘、IO等监控方法详解-摘自网络

    一般操作系统性能主要涉及到的问题主要有:处理器使用情况.内存占有量.磁盘I/0操作以及网络流量等. 查看Windows性能情况,大部分情况下是通过 “Windows任务管理器”,可以通过在 ”命令行” ...

  3. 解决网站出错后 跳转 友好页面 的 asp .net 配置

    <system.webServer> <httpErrors errorMode="DetailedLocalOnly"> <remove statu ...

  4. socket.io使用随笔

    这段时间一直在做一个手机APP,正好使用到了socket.io.这里记录一下服务器端发送信息的几种不同方式: socket.emit('message',"this is a test&qu ...

  5. [置顶] 解成电OJ1003真实的谎言的记录

    原题目 Description   N个人做一个游戏,游戏中每个人说了一句话(可能是真的也可能是假的) 第i个人说:“N个人中有至少有ai个,至多有bi个人说的是真话!”(i = 1, 2, 3….. ...

  6. gmt学习资源

    1 http://seisman.info/ http://examples.gmt-china.org/ http://docs.gmt-china.org http://modules.gmt-c ...

  7. 剑指OFFER之丑数（九度OJ1214）

    题目描述: 把只包含因子2.3和5的数称作丑数(Ugly Number).例如6.8都是丑数,但14不是,因为它包含因子7.习惯上我们把1当做是第一个丑数.求按从小到大的顺序的第N个丑数. 输入: 输 ...

  8. tomcat+JNDI+spring 的配置问题

    在做spring有关的项目时,往往需要配置数据源,当然配置的方式有很多种,可以单独写在一个properties文件中,这样修改数据源配置的话比较容易,也比较简单,下面介绍另外一种数据源的配置 利用jn ...

  9. action 带参数跳转

    都容易忘记 <result name="goOpPolicy" type="redirect">queryPolicy.action?aaaa=${ ...

  10. <转>linux 下stm32开发环境安装

    传送门: http://www.eefocus.com/marianna/blog/13-10/298454_7e04f.html http://blog.sina.com.cn/s/blog_643 ...