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.39046.com-江苏福彩11选5| www.223799.com-全国快三投注| www.5696.biz-第一彩票骗局| www.593386.com-七彩影院是骗局吗| www.730045.com-下载12彩票-| www.585870.com-代购美国彩票| www.728860.com-大连体彩申请| www.270820.com-7彩网app-| www.789754.com-竞彩单关套利| www.828427.com-喝彩的解释-| www.960473.com-福彩3d推荐号今天| www.9734.pw-特彩吧app狗的号| www.73977.cc-福彩1d技巧-| www.322470.com-足彩中几个亿会吗| www.454120.com-聚鑫乐彩怎么充值| www.127731.com-足球彩票腰折怎么算| www.773467.com-七乐彩福利彩票| www.936292.com-世界杯足彩规则| www.xa97.com-彩经网预测资讯| www.721133.com-快三如何算中奖| www.807913.com-黑桃k时时彩| www.907907.cc-七乐彩选号技巧公式| www.972521.com-水溶性彩铅画星空鹿| www.kt1.cc-北京体彩快十一选五| www.pb59.com-快三秒图片-| www.265572.com-福彩3d福降天下网| www.427168.com-二分彩预测-| www.088510.com-足彩单场比分直播北| www.200100.cc-智慧彩挂机软件| www.796419.com-亚洲购彩网能提现吗| www.889152.com-下彩彩票手机版| www.970851.com-vr分分彩漏洞| www.cp2234.com-uu快三投注规律| www.6826.top-三地彩吧报-| www.674704.com-36o彩票大厅| www.np72.com-彩票在线模拟选号| www.153145.com-旺彩游戏注册| www.045033.com-体彩481玩法体会| www.7908.cm-北单500彩-| www.26254.com-河北快三app| www.122799.com-天天中彩票登录不了| www.16yb.com-双色球易网彩票网| www.ae64.com-澳客手机彩票网| www.03dw.com-彩票五等奖是多少钱| www.907339.com-电脑版中国体育彩票| www.896491.com-华夏彩票平台登录| www.787149.com-彩宝贝网彩票选号| www.34170.com-快三最多连多少期小| www.270172.com-注册7k彩票-| www.379838.com-福彩3d连线报| www.596753.com-南阳彩开奖直播现场| www.724018.com-cc彩球网注册| www.801946.com-大老人体彩预测| www.000868.com-快三推荐软件| www.144083.com-九万彩票-| www.31359.com-哪个彩票软件靠谱| www.92377.cc-福彩大奖怎么领| www.7723.pw-618购彩-| www.51235.cc-风大彩票-| www.6819.me-体彩投注码-| www.32169.com-go彩票的邀请码| www.88724.com-9彩娱乐平台登录| www.47376.com-阿里彩票官方网站| www.50757.com-海南私彩中奖规则| www.809342.com-买彩票有灵感吗| www.486133.com-飞彩网能赚钱吗| www.126516.com-19049足彩大势| www.203073.com-如何开一家彩票店| www.037666.com-老公买彩票输钱| www.297845.com-玩快三根本无法赚钱| www.364359.com-微博世界杯彩票提现| www.026354.com-赢家彩票官网邀请码| www.y10.org-178彩票代理平台| www.50yc.com-巨彩网站合法吗| www.3978.vip-唯彩看球双色球杀号| www.34001.com-吉林快三贴吧最新| www.775549.com-石家庄体彩中心| www.40tq.com-88爱彩app下载| www.132195.com-濮阳县定亲彩礼| www.450014.com-网上彩票有哪些种类| www.42756.com-足彩预测推荐| www.781645.com-福彩新玩法-| www.862075.com-幸运彩票正版app| www.928870.com-旺旺彩票是真是假| www.984753.com-彩运8网址-| www.td7.com-福建快三时时彩| www.8658.in-五洲彩票平台网址| www.186066.com-彩票奖金对照表| www.322259.com-热门彩票大全| www.72344.com-彩票加倍计算器| www.733223.com-江苏体彩大乐透| www.239856.com-王者彩票赚钱吗| www.010738.com-注册福彩咋注册| www.060113.com-聚华体彩店app| www.332511.com-12321举报黑彩| www.451144.com-小店宝彩票-| www.539602.com-线下彩票app| www.166029.com-被关掉的彩票黑平台| www.35922.com-彩九.com下载| www.96606.com-手机彩票挂机软件| www.796124.com-彩票可以选几个号码| www.466846.com-黑龙江体彩票| www.377557.com-离婚彩礼和嫁妆问题| www.613306.com-福彩充值卡-| www.688844.com-105官网彩票| www.95126.com-中了彩票怎么领奖| www.704244.com-福彩安装-| www.803840.com-海南彩查询-| www.889460.com-黄金神彩网-| www.965121.com-5oo彩轻聊版| 网易彩票www.560259.com| www.541668.com-彩8彩票客服电话| www.53eq.com-家家好彩提供一肖| www.018393.com-宝赢彩票软件app| www.338789.com-98彩票网手机| www.493293.com-连连中彩票下载| www.575837.com-彩票店系统几点停售| www.666479.com-e乐彩合法吗| www.0712.cc-体彩投注站网上申请| www.sl43.com-重庆彩票官网首页| www.256211.com-锋彩直播手机版苹果| www.328400.com-彩票精英-| www.18215.cc-色彩对比-| www.92659.com-竞彩球队数字编号| www.077181.com-福利彩票什么玩| www.35hr.com-星期3开什么彩票| www.209788.com-青海省快三开奖查询| www.567064.com-百盛娱乐彩票| www.270618.com-中彩票要求平分| www.374567.com-体彩在线刮刮乐| www.073962.com-宏发娱乐彩票邀请码| www.234574.com-快三大小倍投技巧| www.310361.com-山东福利彩票兑奖| www.372022.com-体育彩票大乐透几点| www.952194.com-娜彩快开公众号| 来运彩票www.5688y.cc| 全民乐彩票www.2934u.com| www.120233.com-中国足彩即时比分| www.93vl.com-彩喷图片是什么| www.ty97.com-彩票里面所谓的长龙| www.374134.com-河南福彩刮刮乐| www.026214.com-黑彩中了1000万| www.51184.com-快频彩票是什么意思| www.233316.com-彩票app下载送| www.5ot.com-竞彩奖金过万交税吗| www.667171.com-英国快三开奖| www.818880.com-如何从网上买彩票| www.954812.com-今晚开什么彩票| www.g16.club-正版福彩双双字谜| www.990830.com-彩票1分快3公式| www.ib7.cc-快三中两个号多少钱| www.go17.com-彩礼和嫁妆比例| www.935741.com-彩票技巧软件| www.977173.com-河南濮阳订婚彩礼| 幸运彩票www.031566.com| www.130940.com-江西彩礼会返还吗| www.712714.com-cp彩票官网下载| www.tj48.com-我的彩票-| www.943848.com-703彩票最新版| www.vp.cc-皇都彩票官网| www.l07.cn-贵州快三计划网页| www.298368.com-内蒙古快三分析| www.730264.com-快三比较稳的倍投法| www.hd36.com-致富彩票-|