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.207973.com-查一下中国彩票开奖| www.015554.com-七星彩的基本走势图| www.113467.com-买彩票的qq群| www.202254.com-贵州省福利彩票兑奖| www.ic6.cc-快三中了两个号码| www.9969.in-酷彩吧助手-| www.72582.com-福彩大花猫图库3d| www.065795.com-彩虹吉他谱周杰伦| www.88296.com-河北快三遗漏号码| www.817198.com-968彩票网址| www.033695.com-正规网上彩票| www.cg3.com-好彩1-| www.58ue.com-福彩网提现是真的吗| www.500939.com-彩色一寸照片| www.v76.cc-江苏快三微信计划群| www.6380.top-企鹅直播平台竞彩猫| www.121804.com-彩票群都是拖| 亿发彩票www.570133.com| www.ky21.com-彩票99客户端下载| www.w75.net-破解3d彩票-| www.690309.com-7乐彩开奖号| www.058936.com-彩99客户端下载| www.197809.com-乐彩3d论坛网| www.816832.com-什么命能中彩票| www.953275.com-竞彩网篮球开奖结果| www.fm89.com-大发快三作弊| www.96bg.com-佳彩印刷厂怎么样| www.wc99.com-福彩快三内蒙古玩法| 东方国际www.055973.com| www.pz29.com-彩九app苹果版| www.964397.com-福利彩票开奖信息| www.997069.com-六合官网彩开奖结果| www.8901.com-新浪足彩预测分析| www.05rq.com-彩铅画背景图| www.470096.com-境外博彩工作犯法吗| www.194110.com-极速快三开奖统一吗| www.ge10.com-体彩开奖结结果| www.960241.com-怎样在手机上买彩票| www.535770.com-彩票有几个号码组成| www.762254.com-彩票零相关分析法| www.1361.vip-3d彩票网彩手机版| www.9564.tv-重时时彩开奖| www.936553.com-体彩大乐透手机扫码| www.611517.com-长春纹彩刺青地址| www.642430.com-乐彩33赚钱-| www.95131.com-足彩分析预测500| www.126546.com-24号体彩中奖号码| www.618438.com-福彩宝石机规则| www.132516.com-彩妆院-| www.552370.com-彩票助手通-| www.788544.com-彩礼一般包括什么| www.40743.com-中彩网官方彩| www.299800.com-凤凰彩票输了几十万| www.695635.com-晓风彩票网站源码| www.791857.com-足彩8串1冷门| www.900946.com-福彩排5开奖| www.969330.com-体彩公益金制度| www.wu4.com-河南快三最大遗漏值| www.49486.com-福建彩票中大奖| www.4553.biz-乐彩客软件下载| www.fv62.com-大发快三看和值技巧| www.765463.com-彩票反水啥意| www.385191.com-bb彩票漏洞赚钱| www.757339.com-买彩票计划群违法么| www.354405.com-彩票唐山中奖三个亿| www.450289.com-七星彩庄家打印单| www.562117.com-彩票信誉网站| www.631812.com-中国购彩网怎么注册| www.700101.com-l辽宁福彩-| www.776253.com-南昌彩票店转让| www.839666.cc-彩色耐磨地坪施工| www.897017.com-快三和值选号法| www.955643.com-中国足彩竞猜官网| 鸿运彩票www.hy0038.com| www.000891.com-时时彩作弊方法| www.155283.com-98彩票网会员登录| www.134446.com-手机福利彩票靠谱吗| www.288673.com-竞彩大奖怎么领取| www.55576.com-购彩怎么玩-| www.011151.com-搜狐福利彩票| www.083758.com-今日彩票开奖杳询| www.682331.com-河北省彩票开奖结果| www.761234.cc-德州好彩快三平台| www.053309.com-江苏快三高手交流群| www.5241.cn-派彩是反水金额吗| www.331538.com-七乐彩票的危害| www.438067.com-贵阳福彩中心电话| www.534364.com-那个彩票平台最好| www.644933.com-彩霸王·论坛高手大| www.8043.vip-大师水彩花卉图片| www.37792.cc-体彩19031开奖| www.76796.cc-中国官方足球竞彩网| www.352522.com-今日彩票安全吗| www.415906.com-彩之家彩票骗人| www.538298.com-彩云国小说-| www.192886.com-727彩票app-| www.175357.com-百度快三彩票合法吗| www.85085.com-彩票二维码泄露兑奖| www.592663.com-七星彩局网下载| www.715458.com-福建快三时时彩网站| www.111255.com-谁有福彩3d微信群| www.4461.top-尊彩会-| www.39379.cc-最专业彩票销售软件| www.8248.cn-5分钟快三下载| www.199999.com-经彩网彩票开奖| www.369772.com-六??彩香港管家婆| www.65um.com-稳定的黑彩平台| www.xd39.com-中彩在线提现快吗| www.3319.in-3d彩经网开机| www.4093.cn-彩虹902无人机| www.202123.com-快三缩水软件安卓版| www.272751.com-网赚彩票12-| www.366627.com-33期福彩号码| www.490068.com-小白彩票手机版| www.610353.com-龙江福彩app下载| www.700133.com-竞彩足球哪个网站好| 网易彩票www.07163y.com| www.k46.net-体彩历史开奖结果| 大赢家彩票www.5086h.com| www.606235.com-福利彩票买号| www.323773.com-众彩彩票是骗局揭秘| www.238707.com-澳洲28彩票骗局| www.338346.com-蚂蚁彩票靠谱吗| www.9584.cn-七彩开奖最新结果| www.70256.com-网上怎么开彩票店| www.iy36.com-浙江体彩网官网首页| www.78nt.com-福彩3d内部包中| www.5828.biz-体彩排列三怎么兑奖| www.633019.com-成都三圣乡七彩田野| www.739522.com-中华彩票代玩兼职| www.811240.com-湖南幸运快三查询| www.903099.com-彩票合买怎么发起| 鸿运彩票www.hy5755.com| www.456493.com-图腾彩票对刷| www.8150.me-爱彩彩票网合法吗| www.37788.com-赌彩网app-| www.298948.com-体彩排列三开奖视频| www.437249.com-成都三彩服饰专卖店| www.570549.com-七彩云南第壹城商家| www.537501.com-有彩色和无彩色搭配| www.796914.com-彩票概率计算方法| www.035851.com-幸运时时彩计划下载| www.079552.com-广州快三-| www.584793.com-58彩票公司在哪吗| www.253195.com-甘肃快三有规律吗| www.379715.com-夫妻俩幻想中彩票| www.9578.vip-彩票组合打黑一胆| www.ok38.com-七乐彩设奖规则| www.586706.com-世界上中最高彩票| www.cp5660.com-玩快三是什么| www.412697.com-竞彩分析师团队招聘| www.659103.com-特区七星彩开奖结果| www.0030.live-彩票买几个好| www.515432.com-七星彩去哪里买| www.548701.com-福彩门资料大全| www.750.me-彩票网直播-| www.971156.com-体彩开奖公告七星彩| www.el74.com-快三平台吧-| www.1280.vip-7乐彩机选一注| www.973250.com-彩虹哥官方网站| 博友彩www.195622.com| www.547409.com-手机玩彩票什么情况| www.237244.com-免费彩票大全| www.810040.com-彩经彩票是正规的吗|