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. PHP常用的基本文件和目录操作总结

    来源:http://www.ido321.com/835.html 一.基本文件的操作 文件的基本操作有:文件判断.目录判断.文件大小.读写性判断.存在性判断及文件时间等 1: <?php 2: ...

  2. Objective-C之消息机制

    话说2014年4月编程语言排行榜中Objective-C的使用比又增加了,看来IOS和MAX OS的开发者是真给力呀. 不过个人感觉用不了多久,IOS和Android的开发者收入就不会有那么大的差异了 ...

  3. 3.1 全局存储带宽与合并访问　-- Global Memory(DRAM) bandwidth and memory coalesce

    全局存储带宽(DRAM) 全局内存是动态随机访问的方式访问内存．我们希望访问DRAM的时候非常快,实际情况是DRAM中出来的数据非常非常慢,这就好比,理想状态是泄洪,水倾巢而出,气势宏伟,实际取水却像 ...

  4. 【noip2007】树网的核

    题解: 首先我们要知道一个性质:如果有多条直径 这个核不论在哪条直径上 答案都是一样的 这样我们就可以随便找一条直径 在这条直径上枚举核的位置 并且dfs预处理maxlon[i] (i在直径上) 表示 ...

  5. HDU-4619 Warm up 2 二分匹配

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4619 一看就知道是二分匹配题目,对每个点拆点建立二分图,最后答案除2.因为这里是稀疏图,用邻接表处理. ...

  6. SQL2008--行号的得到

    WITH DataTable AS( select *, ROW_NUMBER() OVER(order by ID) as Rowno from (select * from UserInfo) a ...

  7. Oracle- plsql developer如何查询SQL语句执行历史记录

    相信很多在plsql developer调试oracle的朋友,经常会遇到在plsql developer执行的某一条SQL语句没有保存,那么我们在plsql developer下如何找到我们执行过的 ...

  8. @@IDENTITY与SCOPE_IDENTITY的用法

    SCOPE_IDENTITY   和   @@IDENTITY   的作用都是取得返回在当前会话中的任何表内所生成的最后一个标识值,简单的说就是在执行一条插入语句之后使用@@IDENTITY的全局变量 ...

  9. Oracle中的AS和IS

    Oracle中的AS和IS是ORACLE为了方便而设置的同义词基本上没有不同 . 使用规则: 1.在创建存储过程(PROCEDURE)/函数(FUNCTION),以及自定义类型(TPYE)和包(PAC ...

  10. 剑指OFFER之复杂链表的复制（九度OJ1524）

    题目描述: 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点). 输入: 输入可能包含多个测试样例,输入以EOF结束.对于每个测试案例,输入的第一 ...