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.65fk.com-说彩词-| www.799728.com-彩票中奖都是命| www.878093.com-重庆时彩对刷| www.0267.cm-567彩票app下| 68彩票www.68682g.com| www.860802.com-河南福彩大星走势图| www.940317.com-我的彩票登陆头彩| 500彩票网www.61655n.com| www.ei23.com-快三追豹子技巧| www.zq59.com-体彩飞鱼8选3技巧| www.700035.cc-瑞典2分彩人工计划| www.788289.com-七乐彩中奖票样图| www.875069.com-微信足彩群-| www.979615.com-计划彩票是什么意思| www.mg29.com-湖壮福彩快3| www.121222.com-微信福彩3d交流群| www.224233.com-uu真人快三计划| www.305040.com-附近彩票投注站| www.965486.com-黑龙江福彩网官网| www.12381.com-如何下载一分快三| www.366673.com-彩铅画怎么调色好看| www.485705.com-腾讯手游彩票| www.313479.com-好彩堂开奖网站| www.394318.com-福利福彩app| www.523059.com-五百竞彩即时比分| www.586998.com-贵宾会彩票网址| www.654292.com-九九彩票做任务| www.342601.com-足彩让一-| www.780966.com-易彩彩票开挂| www.6476.vip-七星彩推荐号码| www.44832.com-百胜彩票网会员登陆| www.069862.com-彩票查询七星彩开奖| www.200726.com-昨天的彩票开奖| www.323997.com-航天彩虹军工四证| www.465189.com-彩票分几种玩法| www.82dq.com-西宁体彩哪里领奖| www.7572.biz-新浪足球彩票奥盘| www.62540.com-永利彩票是黑彩吗| www.072728.com-彩票最高中奖| www.219749.com-众彩网首页官网| www.345028.com-苹果版彩票-| www.492942.com-内蒙快三历史数据| www.610328.com-秋天风景彩铅画图片| www.007654.cc-甘肃体彩中心地址| www.086678.com-绽放溢彩-| www.174904.com-福彩快三大全下载| www.243588.com-搜狗彩票安全吗| www.313783.com-今日竞彩推荐预测| www.386688.com-辽宁全运彩走势图| www.500633.cc-一分彩怎么玩能赢钱| www.566429.com-河南福彩网百度| www.339647.com-竞彩足球比分针算| www.414119.com-挂彩粤语-| www.512306.com-古风女彩铅-| www.582390.com-鸿运彩票是官网吗| www.654512.com-网彩坑人-| www.726111.com-3d百度贴吧彩票吧| www.793733.com-中国中彩票最多的人| www.864834.com-安徽快三号码分布| www.926381.com-江西时彩开奖记录| www.995244.com-英国五分彩开奖软件| www.bk20.com-买彩票36元骗局| www.su21.com-9彩彩票是真的假的| www.660950.com-七乐彩中几个数有奖| www.751948.com-亚洲彩票网投| www.829203.com-新乐彩票app| www.896782.com-网络彩票漏洞赚钱| www.961007.com-福彩三d双期走势图| 幸运彩票网www.33598c.com| www.jz37.com-新彩彩票平台| www.137908.com-六福彩结果-| www.263276.com-cp彩票骗人-| www.988770.com-微彩站app下载| www.bm70.com-竞彩篮球推荐| www.761727.com-中国福利彩票图迷| www.890740.com-有青岛快三吗| www.oy27.com-彩票诈骗案成功告破| www.046909.com-甘肃体彩助手| www.222649.com-七乐彩中奖查询| www.416747.com-彩虹礼花炮教程| www.837375.com-竞彩返点是多少| www.6713.shop-什么是极速快三| www.74338.com-詹天佑3d彩票标签| www.zm2.cc-福彩快三遗漏数据| www.02ce.com-山东体彩人工电话| www.03192.com-35彩票怎么样| www.354563.com-体育彩票北单| www.896300.com-500彩票怎么样| www.2448.com-2分彩开奖记录| www.52971.cc-青海快三专家推荐| www.108753.com-中华彩票手机软件| www.553495.com-足彩输-| www.746607.com-彩票23-| www.974085.com-一分时时彩是哪里的| www.6622.cm-218彩票app-| www.100123.cc-大彩网电脑版| www.252199.com-旺彩彩票app| www.416666.com-上海快三有几期| www.657777.com-体育彩票哪个台直播| www.0938.date-体彩三d是好多| www.036684.com-玩快乐彩五行绝招| www.208018.com-爱投彩票是正规的吗| www.456873.com-坚持买彩票的语句| www.589093.com-竞彩篮球实时比分| www.713936.com-v凤凰彩票平台| www.844333.com-竞彩理论知识| www.978790.com-好彩1开奖预测| www.008734.com-高频彩票数字原理| www.133704.com-快三遗漏走势图| www.298660.com-qq彩票在哪里| www.456569.com-蛋蛋28开奖彩迅| www.820908.com-彩钢复合板-| www.977717.cc-世界杯彩票网站| www.627.website新的彩票直通车| www.891.date-全天彩诈骗-| www.78107.com-科学计算器彩票| www.428868.com-苏州彩票图片| www.345620.com-申请福利时时彩| www.506279.com-彩票ddcc-| www.929953.com-新疆竞彩快三查询| 手机购彩www.281110.com| www.979769.com-博发彩票网页版| www.1857.org-新浪福彩体彩| www.637372.com-彩虹5视频-| www.ll07.com-彩票巴士下载| www.80nw.com-中彩票怎么交税| www.13113.com-三六零竞彩比分直播| www.115876.com-彩铅风景画简单| www.456035.com-4scc彩票最齐全| www.184.online-柬埔寨1分彩| www.05336.com-彩金换黄金怎么换| www.788732.com-竞彩篮球分析软件| www.563647.com-广西快三提示| www.702788.cc-彩宝知名品牌| www.032767.com-诸葛智彩软件| www.183610.com-河南快三一定牛遗漏| www.152048.com-彩店宝彩票历史版本| www.381564.com-卖私彩如何盈利| www.226757.com-彩铅画星空-| www.981000.com-七彩是啥意思| www.835787.com-好彩一八指什么生肖| www.133008.com-世界杯足彩在哪买| www.271388.com-好彩蓝莓双爆价格| www.909703.com-福彩双色球开奖下载| www.381649.com-乐彩3500写真机| www.31475.com-查看全国彩开奖| www.11951.com-网络彩票请问合法吗| www.036961.com-01彩票手机-| www.273449.com-福彩案的处理结果| www.864871.com-大奖彩票登陆| www.972887.com-彩虹代刷app官方| www.044874.com-彩票系统api接口| www.230430.com-新3d彩吧-| www.588464.com-天空彩票与你同行| www.824522.com-福彩动物总动员技巧| 500万彩票www.39500t.com| www.2lx.cc-体彩不能买双色球么| www.760553.com-上海快三和值走势| www.798335.com-彩运8.首页-| www.930877.com-吉林省体彩11远5| www.sw0.cc-破解彩票算法的漏洞| www.m39.cc-甘肃快三开奘号| www.91de.com-辉煌彩票中奖技巧| www.819994.com-天天幻想自己中彩票|