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.175857.com-快三追号神器| www.0107.com-福彩3b和值遗漏| www.5022.top-福彩杀码村-| www.750452.com-豪彩投计划-| www.862270.com-k彩手机版注册| www.948135.com-神彩福牛双色球网站| 万历彩票www.77114c.com| www.kh26.com-彩票走-| www.h00.com-上官燕七星彩| www.031804.com-色釉是釉下彩吗| www.182505.com-福利彩票安徽快三| www.260071.com-彩票数字之间的奥秘| www.355479.com-快彩倍投技巧| www.7420.cn-附近竞彩投注站| www.32192.cc-易彩集团靠谱么| www.577276.com-甜蜜蜜彩票糖果| www.867309.com-2019期七星彩| www.965979.com-福彩快三的危害| www.cy2.cc-老时时彩开奖| www.yh29.cc-7星彩开奖号码| www.51mn.com-苏州福彩中心兑奖处| www.1959.pro-福彩彩吧迷图第一版| www.395289.com-南京体彩兑奖地址| www.343442.com-78彩票怎么注册| www.760742.com-好彩三遗漏走势| www.869729.com-幸运5星彩开奖结果| www.954661.com-大陆能买外国彩票吗| www.ag9.cc-北京快三怎么选和值| www.84290.com-七星彩直播结果| www.4484.vip-快三基于什么原理| www.dj61.cc-彩票玩法兑奖规则| www.g49.xyz-苹果彩票网址| www.59vy.com-体育彩票退机器押金| www.743250.com-3d彩票规律技巧| www.868538.com-七星彩最小值走势图| www.81zc.com-5808万彩票-| www.8148.cm-中彩网中奖大全| www.682553.com-彩票01官方下载| www.902155.com-贷款买3d黑彩5码| www.987298.com-湖南省福利彩票兑奖| www.nx53.com-快三可以挣钱吗| www.029.pink-彩票一号店软件下载| www.311044.com-釉中彩餐具安全吗| www.414853.com-江苏快三全天82期| www.541777.com-大连市体彩中心官网| www.154985.com-胜负彩玩法中奖规则| 手机购彩www.257588.com| www.3515.cc-天天中彩票系统维护| www.410926.com-老版唯彩看球| www.491314.com-澳博彩票计划| 500彩票www.50026k.com| www.192587.com-甘肃体彩新十一选五| www.698028.com-河北保定锦乐快三| www.850088.com-彩票中奖税率是多少| www.926300.com-4168彩票app| www.980571.com-成功彩票的网站| www.fj3.cc-十大靠谱彩票平台| www.020835.com-体彩3d开奖结果| www.54cy.com-彩票中奖最高金额| www.038385.com-彩票图表走势图表| www.gp73.com-河南彩礼不超过8万| www.55929.com-k彩彩民福路线测试| www.459009.com-下载广西快三| 凤凰Vwww.www.fh7557.com| www.995891.com-竞彩足球软件排行| www.593391.com-多彩投烂项目| www.203992.com-今日福彩3d字谜图| www.924422.com-六亿彩票下载| www.476666.cc-哪个彩票网址可靠| www.952194.com-娜彩快开公众号| www.872321.com-彩票的全部技巧| www.oo0.com-江苏快三推荐什么号| www.013694.com-今天体彩5d走势图| www.57425.com-星彩无惨漫画桃屋猫| www.012355.com-彩票网上全部停售吗| www.090953.com-众彩软件-| www.151456.com-中彩国际时时彩| www.218825.com-网络彩票代理| www.281793.com-下载福彩开奖| www.868328.com-海南彩梦册-| www.983489.com-彩9彩票下载| www.505308.com-网易彩票500期| www.668177.com-cc彩票网址-| www.347836.com-天天竞彩官方| www.053207.com-西安彩票店转让信息| www.915433.com-tcp688淘彩票| 网易彩票www.26163g.com| www.31916.cc-竞彩比分唯彩| www.879619.com-北京快乐彩合法吗| www.08hz.com-福彩3d晚秋字谜| www.597322.com-五福福彩是个什么| www.701074.com-彩票通手机版| www.576924.com-红红火火彩票| www.654426.com-南昌彩票诈骗| www.718098.com-周杰伦彩虹mv| www.733408.com-全民彩票qm111| www.863719.com-体彩5星彩查询| 福彩www.26878x.com| www.81199.cc-中国体育博彩业| www.517285.com-福彩万能六码| www.3186.biz-体育彩票送8克金条| www.4gn.com-福彩东北彩吧3| 必发彩票www.760557.com| www.0906.mobi-福利彩票篮球杀号| www.3628.wang-彩播app官网| www.753035.com-八方彩票网-| www.691.net-竞彩2串1投资计划| www.7759.top-青岛体彩官网| www.87073.com-彩王争霸平台| www.132222.com-烟台彩礼2018| www.844494.com-中国彩票史-| www.728253.com-高频时时彩骗局| www.848259.com-山西彩礼一般给多少| www.946979.com-室内彩色水泥地面| www.ah27.com-南國彩票-| www.64qg.com-足彩投资宝典电子版| www.8631.in-百宝福彩-| www.026217.com-足彩推荐分析| www.240084.com-彩铅画樱花-| www.461342.com-福彩三的预测| www.557113.com-vr3分彩走势图| www.623691.com-9288pk彩票-| www.689282.com-鼎峰彩票-| www.761248.com-彩票可以异地兑奖吗| www.826327.com-银川体彩店转让| www.880743.com-十分彩官网-| www.937289.com-神彩福牛双色球| www.983774.com-开心七星彩论坛| www.cai6234.com甘肃快三1000期| www.ff38.com-甘肃体彩助手手机版| www.5086.vip-属蛇的彩票中奖号码| www.260744.com-亚洲彩票违法吗| www.81cp.com-蚂蚁彩票-| www.0528.cc-福彩牛彩图迷| www.7920.loan-鸿运网彩票-| www.026221.com-福彩3d图迷慧总| www.108077.com-时时彩票十大排行榜| www.203171.com-怎么样看彩票走势图| www.683739.com-海南体彩下载app| www.800018.com-福利彩票网走势图| www.935507.com-旺彩3d预测-| www.up43.com-鸿彩网登录-| www.875800.com-湖北福彩网公告栏| www.383126.com-福彩16号开奖号| www.539748.com-彩经网走势图带震幅| www.671958.com-彩票分分快3| www.13381.com-足彩复式注数| www.559732.com-彩宝的宣传语| www.033310.com-澳门5分彩官网| www.3ff.cc-彩票奖金多久到账| www.49sg.com-彩友计划-| www.230.in-爱彩乐彩票平台| www.1910.in-横沥东方亮彩厂好不| www.1847.website一分钟出一次什么彩| www.p73.net-新浪彩票数据提醒| www.318851.com-浙江省福彩中心官网| www.436018.com-鹤壁体彩网点申请| www.620392.com-广州体彩店转让| www.737008.com-智能预测彩票| www.47pb.com-松坂桃李刚力彩芽| www.450.net-淘宝怎么哪个彩票| www.kd88.com-福彩双色球球选号器| www.05ce.com-上海七乐彩开奖号码| www.90lj.com-国家缴税标准彩票|