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. NOIP2005 篝火晚会

    篝火晚会 (fire.pas/c/cpp) [问题描述] 佳佳刚进高中,在军训的时候,由于佳佳吃苦耐劳,很快得到了教官的赏识,成为了“小教官”.在军训结束的那天晚上,佳佳被命令组织同学们进行篝火晚会. ...

  2. NOIP2011 计算系数

    1计算系数 给定一个多项式 (ax + by)k ,请求出多项式展开后 x n y m 项的系数. [输入] 输入文件名为 factor.in. 共一行,包含 5 个整数,分别为 a,b,k,n,m, ...

  3. 11个高级MySQL数据库面试问题和答案

    因为有大家的支持,我们才能做到现在,感谢你们这一路上对我们的支持.在这篇文章中,我们将主要针对MySQL的实用技巧,讲讲面试中相关的问题. 1. 如何使用SELECT语句找到你正在运行的服务器的版本并 ...

  4. EntityFramework更新多条数据【8万】

    此文主要用做记录用: 原因:数据库迁移,需要转换大量用户资料,两数据某字段加密方式不一致需要批量转换 注:转换程序用了EntityFramework 过程: 1.读取所有需要转换数据至List 2.采 ...

  5. ScrollView详解

    创建方式 1:StoryBoard/Xib 这里StoarBoard就不多说,直接拖就可以,说太多没意思,如果连这个都不会我只能先给你跪了! 2:代码: 1 2 3 CGRect bounds = [ ...

  6. UI进阶 解析XML 解析JSON

    1.数据解析 解析的基本概念 所谓“解析”:从事先规定好的格式中提取数据 解析的前提:提前约定好格式,数据提供方按照格式提供数据.数据获取方则按照格式获取数据 iOS开发常见的解析:XML解析.JSO ...

  7. Visual Studio 2012 应用软件开发新方式

    微软正式发布Visual Studio 2012 应用软件开发新方式 2012-09-13 09:54 51CTO.com 我要评论(0) 字号:T | T “现在,开发者将有更好的机会开发与云服务连 ...

  8. 按要求编写一个Java应用程序： （1）定义一个类，描述一个矩形，包含有长、宽两种属性，和计算面积方法。 （2）编写一个类，继承自矩形类，同时该类描述长方体，具有长、宽、高属性， 和计算体积的方法。 （3）编写一个测试类，对以上两个类进行测试，创建一个长方体，定义其长、 宽、高，输出其底面积和体积。

    package jvxing; public class Jvxing { //成员变量 private double width; private double chang; public doub ...

  9. BZOJ 2049: [Sdoi2008]Cave 洞穴勘测 LCT

    2049: [Sdoi2008]Cave 洞穴勘测 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnli ...

  10. JavaScript学习笔记之下拉选择框的操作

    对于下拉框的操作十分繁多,这几天项目须要就总结一下 一.动态构建option 有时候我们须要动态构建下拉选择框里面的值,这里我们就要用到 var varItem = new Option(" ...