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.we33.com-兰州市体彩中心电话| www.959466.com-彩吧图库第一版开| www.cp8458.com-內蒙古快三一定牛| www.255.live-建筑彩钢围挡| www.761924.com-算局七星彩奖表划规| www.38423.cc-505彩票网安全吗| www.33848.com-广西快三大小怎么算| www.25796.cc-体彩手机客户端| www.51711.cc-凤凰时时彩正常登录| www.311775.com-甘肃省福利彩票开奖| www.304112.com-彩票01手机安卓版| www.395790.com-七乐彩一等奖多少| www.510210.com-福利彩票站利润| www.47no.com-dt大通彩票-| www.624788.com-500彩票人-| www.302559.com-328彩票下载| www.452618.com-分分彩最稳打法| www.n49.club-用户注册中福彩票| www.313.cn-彩票中五元怎么兑奖| www.903252.com-高频彩吧登录| www.109032.com-胜负彩新浪完全数据| www.76mc.com-福彩式机号今天| www.3878.cm-3d彩吧图谜第三版| www.08209.com-体彩排列三开走试图| www.66162.com-体彩排列三胆码预测| www.857530.com-彩票中5个号多少钱| www.53wy.cc-陕西福彩微信公众号| www.3431.vip-诺亚彩票安全登录| www.179683.com-彩客网-| www.98878.com-体育彩票销售有限额| www.648921.com-一定牛快三湖北| 大赢家彩票平台www.802837.com| www.08jc.com-七星彩规律拆奖图规| www.017932.com-好莱客彩票下载| www.174468.com-福彩苹果版下载| www.332078.com-6s手机彩膜-| www.795488.com-最新彩票app大全| www.904086.com-店之宝彩票-| www.990025.com-福彩3d彩报银海| www.fh09.com-湖北快三数据专家| www.246471.com-彩票快三单查询结果| www.097161.com-快三如何追豹子| www.400416.com-点击彩平台怎么样| www.956673.com-打错彩票店主全赔| www.592951.com-彩虹6号官网| 中华彩票www.9149p.com| www.092703.com-夏邑彩礼价目表| www.61916.cc-领航彩下载-| www.121028.com-网络彩票计划员| www.318217.com-彩投是什么玩法| www.512971.com-好运彩票app| www.801269.com-猫咪彩票网址| www.376983.com-七星彩1到9的合数| www.8714.xyz-特彩网吧-| www.083976.com-彩盈娱乐app| www.531260.com-九五彩票-| www.389953.com-体彩字谜总汇| www.508002.com-大乐透购彩计算器| www.185946.com-天津时时彩开奖结果| www.922816.com-rrz彩票-| www.bk20.com-买彩票36元骗局| www.406.pw-腾讯的彩票竞猜关了| www.cp8518.com-彩票带回血骗局套路| www.tx13.cc-谁会玩大发快三| www.21ou.com-彩票竞猜好运连连| www.br7.com-快三多少组号| www.uq18.com-高频彩票论坛| www.25ky.com-上海华彩咨询集团| www.38gt.com-七星彩定胆拖| www.0788.cm-彩之家是什么| www.9998.me-体彩重庆-| www.69463.com-天天中彩票贴吧| www.774754.com-亿元彩票-| www.cp636.com-新版彩神88app| www.155983.com-好彩客ios-| www.3gv.com-德国时时彩-| www.66579.cc-55125彩吧图库| www.909455.com-彩票快三中了多少钱| www.983914.com-彩99能提现吗| www.9755.cc-发财网彩票网址| www.iq42.com-彩乐乐彩票幸运选号| www.229625.com-093彩票开户| www.979748.com-一品彩票网手机版| www.bg95.com-网易彩票app下载| www.369599.com-京东1.5分彩| www.395261.com-足球篮球彩票app| www.1835.net-正彩是牌子吗| www.060692.com-黑彩买到多少违法| www.937281.com-神彩福牛双色球专栏| 中彩网www.71233f.com| www.072509.com-湖北快三二同号遗漏| www.917484.com-必赢彩票-| www.974547.com-江苏福彩快三奖金表| 七乐彩www.788572.com| www.740622.com-澳彩官网-| www.828222.com-中23亿彩票-| www.916780.com-彩票台子收集网| www.985169.com-快乐彩辅助-| www.nb.cc-北京福彩-| www.kv24.com-天天彩票买大小单双| www.q92.net-河北快三规律| www.6953.org-七星彩后三位中奖吗| www.2349.top-三α彩票-| www.90px.com-微彩站如何使用| www.14089.com-有人中过彩票上亿吗| www.001664.com-聚富彩手机旧版| www.070385.com-七乐彩中奖号今天| www.98um.com-黑客攻击私彩| www.75fu.com-彩票如何才能中奖| www.36504.com-卖彩票的工作好学吗| www.139337.com-辽宁福彩快乐十二| www.219235.com-百盈共享彩票大全| www.698234.com-温州体彩官网首页| www.803687.com-微信好友拉玩彩票| www.895122.com-正规网投彩票网站| www.963362.com-星光彩票大发快| 500彩票www.202406.com| www.099286.com-五福彩票专业版下载| www.47jz.com-东方彩票开奖网| www.209654.com-福彩旗下的快开彩| www.pj80.cc-一定牛北京快三| www.ai12.com-7星彩最准专家预测| www.21eu.com-喜盈盈彩票大厅| www.644.bid-时时彩彩票易位理论| www.1034.com-小石彩票助手| www.751244.com-彩票巴巴苹果版下载| www.968283.com-彩票所有的号码全麦| www.bz82.com-燕赵福彩网排列5| www.00uk.com-3d彩票分几种类型| www.4974.biz-新浪爱彩论坛| www.42581.com-广东体育彩票大乐透| www.9620.in-俄罗斯皇家国际快三| www.3314.biz-陕西省体彩发行中心| www.762103.com-合肥十一选五爱乐彩| www.8567.cn-七星彩开奖人是谁| www.755772.com-旺彩彩票合法吗| www.871175.com-赢彩彩票怎么样| www.969205.com-网易足彩专家推荐号| www.cai6499.com网上快三平台骗局| www.037762.com-体彩开奖历史开结果| www.058139.com-五分快3是什么彩票| www.130472.com-彩票扫描查询选号| www.1077.org-高手网天空彩票| www.4410.vip-福利彩票返还率| www.34328.com-上海福利彩票app| www.449192.com-沈阳北到省福彩中心| www.464910.com-彩之家彩票网如何| www.586387.com-免费彩金28元| www.009817.com-彩票必赢网-| www.36345.com-福彩主任是多大的官| www.111835.com-最好彩票平台有哪些| www.593391.com-多彩投烂项目| www.8778.live-分分彩官网下载链接| www.017824.com-买彩网app-| www.65aj.com-河南7星彩开奖查询| www.139128.com-共享彩票机招商| www.073691.com-金彩官网-| www.854698.com-快三玩家如何作弊| www.188318.com-福彩3d玩彩老头| www.805961.com-买彩票发财-| www.451600.com-乐彩走势图3d| www.rn41.com-红包彩票app| www.6553.cc-r8彩票app-| www.996816.com-网络彩票诈骗案案例|