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.34949.com-澳门意大利彩金项链| www.024234.com-新福利彩票543站| www.509636.com-彩票开奖面-| www.972255.com-大众彩票是公办的吗| www.n30.tv-京彩彩票挣钱吗| www.77359.cc-体彩奖号查询| www.057060.com-澳门十二生肖彩| www.179666.com-中国福利彩票app| www.57344.com-七公鸡七星彩下载| www.209827.com-快三挣钱么-| www.418702.com-澳客彩票代购合法吗| www.566950.com-好彩堂全年资料大全| www.225352.com-福彩河南快三走势图| www.410300.cc-算彩票中奖app| www.670049.com-风彩的意思有几种| www.370628.com-体彩4场进球对阵表| www.985098.com-红彩会登录手机版| www.0442.cn-凤凰彩票带你飞| www.05148.cc-网络彩票2019| www.8220.loan-苏州体育彩票中心| www.3198.xyz-中国体彩网123| www.28319.cc-趣9购老彩票破解器| www.447701.com-爱趣彩彩票网| www.590178.com-竟彩足球一周对阵表| www.89970.cc-七星彩摇号吗| www.940065.com-90后中彩票10亿| 虹彩集团www.hcjt5.com| www.867760.com-体彩软件-| www.948879.com-武汉体育彩票转让| 500彩票www.50051s.com| www.280298.com-福彩3d走势图福| www.417999.com-爱投彩票系统| www.cp7188.com-玩江苏快三倾家荡产| www.3rt.cc-爱乐透彩票门户网站| www.31ho.com-飞盘奇门测彩| www.72456.com-彩吧彩票购彩平台| www.835988.com-顺丰彩票软件| www.989276.com-福建体彩排列三| www.qf17.com-晚晚好彩-| www.433379.com-竞彩4串1推荐| www.pq88.com-双彩网论坛官网| www.89zm.com-彩漂能洗白色毛衣吗| www.4972.com-无忧网彩票-| www.866495.com-福利彩票昨天开的| www.931951.com-网络中原彩票靠谱吗| www.995569.com-竞彩北单推荐预测| www.la22.com-52彩票-| www.01bt.com-彩虹卡的颜色的寓意| www.8885.la-足彩中五千万神人| www.73153.cc-长沙霞凝港福彩中心| www.077840.com-彩乐汇客户端下载| www.356760.com-彩票怎么宣传| www.v73.net-新浪爱彩双色球走图| www.92bx.com-互彩宝怎么登陆彩票| www.5797.pw-博信彩票-| www.56278.com-欢迎光临聚宝彩票网| www.214931.com-新快三手机版下载| www.301920.com-七星彩最怪号| www.396440.com-今天福彩什么开奖| www.i46.net-约彩彩票开奖大厅| www.021749.com-竞彩嘉奖app| www.125679.com-菠萝彩票网-| www.232334.com-甘肃快三昨天走势图| www.332656.com-668彩票网站| www.025741.com-福彩家彩网专家杀码| www.8620.love-中乐彩注册登录| www.39769.cc-ios购彩app-| www.185472.com-分分时时彩稳赚技巧| www.996254.com-北单体彩官网| www.nt22.com-为什么彩票不算赌博| www.583003.com-福利彩票模板| www.691937.com-彩乐乐app下载| www.771720.com-51计划重庆时时彩| www.356593.com-彩票没买却中了| www.301159.com-南方双彩网主页| www.374355.com-2017年七星彩| www.464068.com-彩票体系玩法| www.570100.com-鸿运彩票钱不能提现| www.633092.com-竟彩蓝球大小分| www.965332.com-爱乐透福彩彩票| www.cs25.com-哪个彩票平台返点高| www.913797.com-澳客胜负彩电脑版| www.990433.com-体彩排列三免费预测| www.mg58.com-好彩网app-| www.61052.com-彩吧vip注册网址| www.062836.com-淘彩票软件是真的吗| www.394758.com-彩虹正版代挂网源码| www.678111.cc-有vr彩票的网| www.120652.com-体彩抽成-| www.86go.com-今天北京快三| www.4655.top-买彩票都是运气吗| www.583558.com-全国高频彩票走势图| www.610269.com-3个数连一起的彩票| www.821819.com-手机彩票投注在哪下| www.954334.com-新彊时时彩中奖助手| www.lx09.com-好彩堂玄机网| www.69as.com-金冠彩票下载平台| www.cp8984.com-爱彩乐江苏快三结果| www.61502.com-足球竞彩乐米网88| www.832580.com-怎么下载七彩视界| www.915900.com-9万彩票官网平台| www.988802.com-华为手机版彩票软件| www.yi72.com-梦见自己买彩票选号| www.169901.com-江苏快三推荐| www.247720.com-七天彩主页-| www.317058.com-318彩票平台| www.881482.com-58彩票官网-| 大赢家彩票平台www.372879.com| www.306602.com-所有彩票网上都停售| www.632465.com-买的彩票如何注销| www.15uv.com-附近体育彩票| www.23432.cc-彩票人工计划网页| www.63161.cc-彩宝彩票提现被拒绝| www.108559.com-速盈彩官网-| www.658558.com-为什么彩视登录不上| www.786326.com-体彩大赢家走势图| www.855832.com-七乐彩模拟投注| www.906512.com-吉林快三网络盘代理| www.971829.com-湖北制造假彩票案| 幸运彩票www.444086.com| www.ca12.com-江苏福彩专家推荐号| www.sm19.com-时时彩18-| www.1rn.com-最火手机彩膜图片| www.50ub.com-福利彩票双色球计划| www.540122.com-网易彩票一分快三| www.595881.com-极速时时彩官网| www.654153.com-微信群里玩北京快三| www.705119.com-海南私彩投注软件| www.765466.com-七星彩票网-| www.815422.com-吉林快三一百期| www.871930.com-毕节市福利彩票中心| www.920926.com-分分快三套路教学| www.967118.com-威海体育彩票抽成| 福彩www.16878k.com| www.ym1.cc-如何买彩票能中奖| www.133.xyz-彩玉石材图片| www.4705.top-也买彩是骗局吗| www.9168.cn-真实的七色彩虹图片| www.660913.com-福彩快三邀请代码| www.278783.com-鸿彩快三是真的假的| www.936133.com-彩票对刷刷反水| www.cp0101.com-1分钟彩票app| www.851.cm-天吉彩票app| www.403893.com-中国福彩春节玩| www.520915.com-福彩3d彩票字谜| www.579457.com-身无彩凤txt下载| www.636585.com-下载重庆市彩时彩| www.686563.com-3d彩乐乐杀号定胆| www.5610.biz-捡彩票充值卡| www.757180.com-彩票开奖查询l百度| www.850573.com-竞彩足球360比分| 彩客博www.8667c.com| www.486368.com-七乐彩字谜图谜| www.500080.cc-幸运28彩票游戏| www.056609.com-够力七星彩奖表旧版| www.1339.wang-中国彩票开奖网大全| www.974386.com-彩虹旗的含义| www.630580.com-竞彩足球名报分析| www.007357.com-体育彩票中了奖号码| www.365287.cc-玩快三跳楼-| www.180772.com-今期福彩3d字谜| www.99166.cc-时时彩投注单笔3万| www.058682.com-彩票哪种中奖率高| www.872986.com-栋栋团队福彩3d|