QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 图片代码 > jQuery宽屏简洁banner图片文字切换代码

原创商用 jQuery宽屏简洁banner图片文字切换代码

jQuery大气宽屏的banner图片切换,制作宽屏背景图片和文字结合动画效果切换代码。适用于大气的网站图片切换展示类型代码。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权保护,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

<link type="text/css" href="css/style.css" rel="stylesheet" />

2、head引入js文件

<script type="text/javascript" src="js/jquery.min.js"></script>

3、body引入HTML代码

<div class="banner-engine">

	<ul class="banner-ul clearfix" id="slider-back">
		<li class="banner-cloudapp"></li>
		<li class="banner-cps"></li>
		<li class="banner-trust"></li>
	</ul>
	<!-- 对应banner文字 -->
	<div class="slider-main">
		<div class="banner-text">
			<div class="slider-text" data-start_top="30" data-to_top="0" data-start_left="0" data-to_left="0">
				<p class="banner-text1" >云应用正式公测</p>
				<p class=" banner-text2" >提供跨云多平台一站式批量云服务器安全管理服务</p>
				<a class="banner-link-button" href="#">参与公测</a>
			</div>
		</div>
		<div class="banner-text">
			<div class="slider-text" data-start_top="30" data-to_top="0" data-start_left="0" data-to_left="0">
				<p class="banner-text1" >CPS推广</p>
				<p class=" banner-text2" ><span style="color: #ffd400;">5日结算随时提现</span>   现在加入共赢云计算市场蓝海</p>
				<a class="banner-link-button" href="#">立即加入</a>
			</div>
		</div>
		<div class="banner-text">
			<div class="slider-text" data-start_top="30" data-to_top="0" data-start_left="0" data-to_left="0">
				<p class="banner-text1" >信任中心</p>
				<p style="line-height: 36px;" class=" banner-text2" >严格经过16+2维度测试<br/>为您提供合规、可用、安全、可信的云计算服务</p>
				<a class="banner-link-button" href="#">立即查看</a>
			</div>
		</div>
	</div>
	<!-- banner索引 -->
	<div class="banner-point">
		<div class="auto">
			<ul class="banner-area" id="slider-btn">
				<li class="active" data-delay="12000"></li>
				<li data-delay="8000"></li>
				<li data-delay="8000"></li>
			</ul>
		</div>
	</div>
	
</div> 

<script type="text/javascript">
$(function() {
    var d = $("#slider-btn li");
    var j = $("#slider-back li");
    var a = $(".banner-text");
    var h = $(".slider-text");
    var e = $(".banner-txt a");
    var i = 0;
    d.each(function(l) {
        $(this).mouseover(function() {
            f(l)
        });
        $(this).data("index")
    });
    function f(l) {
        i = l;
        d.eq(l).addClass("active").siblings().removeClass();
        var m = a.eq(l);
        var n = m.children();
        m.siblings(".banner-text").stop(true).fadeOut(100);
        m.show();
        n.each(function() {
            var o = $(this);
            o.css({
                display: "block",
                opacity: 0,
                top: o.data("start_top") || 0,
                left: o.data("start_left") || 0
            });
            o.stop(true).delay(400).animate({
                display: "none",
                opacity: 1,
                top: o.data("to_top"),
                left: o.data("to_left")
            },
            1200);
            if (o.data("class") !== undefined) {
                o.removeClass(o.data("class"));
                setTimeout(function() {
                    o.addClass(o.data("class"))
                },
                0)
            }
        });
        j.eq(l).siblings().stop().animate({
            opacity: 0
        },
        600);
        j.eq(l).stop().animate({
            opacity: 1
        },
        600)
    }
    function g() {
        i++;
        if (i == d.length) {
            i = 0
        }
        f(i)
    }
    var c = null;
    var b = $("#slider-btn");
    var k = function() {
        var l = b.find(".active");
        c = setTimeout(function() {
            g();
            k()
        },
        l.data("delay") || 8000)
    };
    k();
    d.hover(function() {
        clearInterval(c)
    },
    function() {
        k()
    });
    f(0)
});
</script>  
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
悟空彩票 www.138337.com-快三所有组合概率| www.387627.com-彩票没中奖表情| www.728508.com-雪缘园足球彩比分| www.897824.com-合买彩票广告用语| 500彩票网www.511079.com| www.906655.com-福利彩票号码是哪些| www.989318.com-两分快三预测| www.hy19.com-搜索福彩图谜| www.06dc.com-彩铅配色表-| www.91as.com-彩票二等奖奖多少税| www.079034.com-福彩3d九宫八卦图| www.139647.com-38彩票官网-| www.324819.com-优中彩-| www.186721.com-牛彩网-| www.359579.com-福利彩票几点不能买| www.517739.com-国家体彩中心| www.609540.com-k彩平台注册| www.62ea.com-明发彩票网址是什么| www.617797.com-陕西省体彩-| www.717503.com-福彩群英会开桨| www.811299.com-体育彩票的玩法规则| www.761074.com-结婚彩礼钱归谁所有| www.99637.cc-重庆时时彩破解漏洞| www.423383.com-竞彩彩标志图片| www.8861.net-福建体彩三十一选七| www.9803.vip-足彩在线缩水软件| www.777780.com-彩票彩吧app| www.cp6311.com-彩乐乐网-| www.k00.in-河北体育彩票转让| www.708810.com-男彩票托套路| www.834545.com-婚庆彩烟哪里有卖| www.973954.com-熊猫误乐彩票平台| www.hn66.cc-江苏快三改变玩法| www.24ch.com-足彩进球数奖金算法| www.1582.wang-彩票收藏论坛| www.197477.com-海南四码彩票| www.355017.com-彩票走势如何看| www.505732.com-头奖彩票官方网站| www.634007.com-七彩滨湖竹园幼儿园| www.639547.com-7星彩所有开奖结果| 大赢家彩票www.5086g.com| www.606859.com-买彩票机选号吗| www.647090.com-足彩14场缩水| www.032496.com-彩票店提成-| www.07770.cc-中彩的那一天课文| www.4475.xyz-七星彩论坛| www.38357.cc-彩票网站优惠| www.2953.biz-彩金狮子单机| www.943566.com-微微彩票官网下载| 彩吧www.856458.com| www.xb48.com-澳门幸运彩-| www.77fd.com-最低一分钱的彩票网| www.4990.vip-足彩彩票怎么看| www.31231.com-彩尊安卓版下载| www.000386.com-陕西福彩20选8| www.106078.com-成功彩票在线| www.69977.cc-中国体育彩票6等| www.062723.com-九鼎彩票快三| www.139728.com-体彩竞彩下载| www.220508.com-彩神vlll合法吗| www.291037.com-找回365彩票| www.363389.com-抖音名字后面的彩虹| www.451886.com-中彩票一等奖的预感| www.540073.com-3d新浪数字彩票| www.609974.com-t星彩-| www.679035.com-糖果派对四个彩金图| www.756656.com-彩球官网aap| www.824120.com-三彩实体店-| www.892633.com-排列三彩票实战高手| www.970835.com-腾讯分分彩漏洞刷钱| www.re16.com-河内5分彩官网开奖| www.39jc.com-山东结婚风俗彩礼| www.670696.com-彩色的造句二年级| www.764835.com-itou彩票打印| www.871605.com-利彩一分快三开奖| www.977586.com-吉利彩票网-| www.jn1.com-上海快三是国家的吗| www.pp25.com-彩民彩票app正规| www.60xs.cc-所谓色彩三要素| www.852.in-海尔电视怎么调彩| www.946262.com-彩经网首页走势图| www.26637.com-宝发彩票网址下载| www.130690.com-安徽福彩客户端下载| www.348228.com-七乐彩是真是假| www.583010.com-159彩票客户端| www.4cr.com-天天爱彩票下载软件| www.53yn.com-国家彩票认证| www.01499.cc-彩印通下载-| www.099282.com-福利彩票中奖新闻| www.282425.com-长期盈利时时彩秘诀| www.482065.com-重庆vr十分彩| www.mx69.com-彩报三版-| www.1543.xyz-天天中彩票官网登录| www.87793.cc-哪里玩彩票的人多| www.385410.com-159彩票怎么了| www.655800.com-m8彩票有漏洞吗| www.854321.cc-多彩网手机app| www.ty09.com-谁有快三微信群| www.98od.com-3d彩粒漆图片| www.7341.top-60彩票靠谱吗| www.50283.com-新宝gg彩票| www.123503.com-双色球福利彩票中心| www.350334.com-十堰市体彩中心| www.565480.com-彩吧图库l-| www.823598.com-彩涂钢板840| www.pv9.com-体彩排列三综合版| www.a88.biz-彩宝种类-| www.17099.cc-上海昨天快三开奖| www.048800.cc-爱彩乐正规吗| www.286116.com-安徽快三专家推荐| www.598350.com-t七星彩开奖号码| www.846028.com-福彩中心主任案件| www.sn90.com-中体彩网首页| www.2222.shop-洛阳七彩格子| www.08572.com-陕西福彩网下载| www.087023.com-乐福彩票网址| www.331143.com-噢客网足彩比分直播| www.ly62.com-彩之家官方正版下载| www.07xi.com-张彩芽-| www.sw22.com-彩票老师带人可信吗| www.130009.com-234彩票软件下载| www.333290.com-玩彩绝技-| www.247922.com-福彩3d开到几期| www.400445.com-希腊五分彩开奖软件| www.739797.com-万博彩票下载安卓| www.45145.com-众彩易购是真是假| www.249944.com-潮信彩票端-| www.cp6338.com-体彩大乐透中奖规则| www.818664.com-新时代竞彩推荐| www.23re.com-意大利幻彩绿| www.878614.com-彩福快3-| www.982516.com-内蒙古快三和值遗漏| www.pp94.com-宁波快乐12彩| www.74147.com-竞彩篮球小分多吗| www.141511.com-糖果彩网站-| www.301023.com-棋牌游戏平台送彩金| www.36oj.com-乐利2分彩走势| www.245927.com-一分一期彩票| www.317310.com-时时彩盈利心得| www.372422.com-胜负彩一等奖多少钱| www.996958.com-11选五江苏爱乐彩| www.di31.com-宁夏彩票种类及玩法| www.z91.xyz-足彩卖料套路| www.84200.cc-中国体彩客服| www.363914.com-福彩组6玩法介绍| 天朝彩票www.15256.cc| www.659240.com-中彩网体育彩票| www.791418.com-上一期福彩中奖号码| www.877103.com-百姓彩票跑路| www.944451.com-体育彩票开店利润| www.cai9986.com精彩十分走势| www.ol00.com-体彩大乐透前一后一| www.838444.cc-竞彩篮球害人| www.120661.com-福利彩票投注中心| www.717130.com-彩铅画画入门| www.771115.com-乐彩33手机app| www.896707.com-网彩代打-| www.963231.com-足彩胜负500| www.bs1.cc-中国快三网出奖号| www.655007.com-小辣椒七星彩软件| www.662601.com-重庆实时彩代理返点| www.ax20.com-内蒙快三一下载| www.16440.cc-好彩客中了50万| www.84tz.com-我爱中彩票-|