文档章节

基于 JQUERY 网页 banner

redfox2008
 redfox2008
发布于 2016/07/01 18:18
字数 317
阅读 1
收藏 0

 

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

 

© 著作权归作者所有

redfox2008
粉丝 0
博文 23
码字总数 29088
作品 0
徐汇
私信 提问
40 个内容图片旋转滑块和幻灯的 jQuery 插件

All Around – jQuery Content Slider / Carousel All in one Slider jQuery Banner Rotator / Content Slider Full Width Slider 2 Layer Slider (Must see parallax effects) Lush – Cont......

oschina
2013/07/16
3.8K
5
39 个超实用 jQuery 实例应用特效

1.Contextual Slideout:上下文滑动特效 2.Revealing Photo Slider:图片幻灯片特效 3.Fancy Box:魔幻盒 4.Scrollable:滚动特效 5.Flip:翻转特效,实现4个方向旋转 6.Smart tooltips:智能...

MrMign
2012/09/12
27.6K
6
9款风格华丽的jQuery/CSS3插件

今天向大家分享9款效果相当不错的jQuery/CSS3插件,不多说,直接来看看这些插件吧。 1、jQuery动画下拉菜单Smart Menu 这是一款基于jQuery的动画下拉菜单,子菜单外观比较时尚,鼠标移到菜单...

yykj
2014/01/06
587
1
8 款值得一试的全新 jQuery 插件

今天本文向大家推荐8款最新的jQuery插件,希望你能够喜欢。 1、jQuery带缩略图竖向伸展焦点图 这是一款jQuery的竖向伸展焦点图,该jQuery焦点图有两个特点,第一切换的按钮有缩略图,第二图片...

yykj
2013/10/24
969
3
7 款风格各异的jQuery图片展示效果

在网页中,图片的展示方式多种多样,当然所要达到的目的也各不相同,本文就是要通过jQuery来实现各种不同的图片展示方式,有jQuery焦点图、图片缩放、图片滚动等效果。如果你喜欢这些小效果,...

yykj
2013/11/08
2.6K
1

没有更多内容

加载失败,请刷新页面

加载更多

计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
今天
4
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
今天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
今天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
今天
10
0
再见 Spring Boot 1.X,Spring Boot 2.X 走向舞台中心

2019年8月6日,Spring 官方在其博客宣布,Spring Boot 1.x 停止维护,Spring Boot 1.x 生命周期正式结束。 其实早在2018年7月30号,Spring 官方就已经在博客进行过预告,Spring Boot 1.X 将维...

Java技术剑
今天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部