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.559231.com-湖北福彩无纸化投注| www.455116.com-金冠彩票软件| www.rl10.com-七乐彩复式中奖金额| www.75gy.com-微信买体彩如何兑奖| www.582058.com-彩票999apk| www.bl5.com-体彩网排列三开机号| www.181296.com-快三出号窍门| www.458880.com-竞彩容错表玩法| www.3721.com-福彩3d大盘走势| www.00505.com-彩票店员工工资多少| www.06058.com-星宇购彩注册| www.609261.com-旧版彩客网客户端| www.133972.com-分分快三怎么选号| www.613610.com-平安线路彩票| www.13088.com-中国福利彩彩票| www.881340.com-高频彩数字概率| www.qy62.com-天天分分彩开奖号码| www.44028.cc-中国体育彩票时时彩| www.357942.com-数字彩五期重号规律| www.2144.vip-彩票36选5是哪个| www.281798.com-彩票预测网站| www.461431.com-购彩老黄历-| www.468.me-江苏体彩虚拟足球| www.256161.com-内蒙古福彩网| www.489109.com-国家体彩云平台| www.sm54.com-彩之家平台靠谱吗| www.76883.cc-陆慧明足彩任九推荐| www.021853.com-彩票中奖了多久过期| www.432003.com-贵州彩票店-| www.539908.com-彩票短期规律工具| 天下彩www.649770.com| www.35377.cc-福彩3d开奖有假吗| www.017158.com-青海快三号码分析表| www.550.in-七乐彩开獎号| www.568.tv-龙虎彩票技巧方法| www.7120.pw-七彩孔雀建盏| www.22310.com-万豪彩票客户端| www.776213.com-香港彩乐网网址| www.068679.com-彩票1分快3资料| www.261829.com-幸运彩下载-| www.351480.com-快三投注合买平台| www.496149.com-必威体育博彩| www.c96.cc-偶像彩票开奖情况| www.054318.com-一分快三大小玩法| www.32921.com-e彩在线手机版| www.wo64.com-广西今天快三结果| www.254143.com-风发彩票app下载| www.760331.com-时时彩号码统计软件| www.md4.cc-快三有没有体彩| www.hv60.com-北京快三详情| www.9689.xyz-彩票销量新闻| www.157294.com-好彩店竞彩版下载| www.970824.com-高频彩漏洞吧| www.680129.com-彩票2元元网| www.e41.loan-马来分分彩开奖记录| www.04111.com-豪彩平台网址| www.022070.com-时时彩澳门平台| www.377188.com-腾讯时时彩开奖数据| www.71eu.com-时时彩的牛牛是什么| www.911675.com-三分赛车彩票可靠吗| www.17lq.cc-qq60秒彩-| www.173512.com-私彩买到多少违法| www.279108.com-上海快三复式计算| www.359338.com-微博彩票游戏下分| www.456683.com-中彩缘网站-| www.560099.com-彩乐乐7位数预测| www.033455.com-店主怎么开通彩站宝| www.5948.cn-外围彩-| www.22543.com-手机买彩票犯法吗| www.021282.com-腾讯分分彩官网结果| www.468535.com-怎样猜中彩票号码| www.625393.com-七乐彩预测牛材网| www.173623.com-湖北快三每天必出号| www.610906.com-体彩足球九场玩法| www.101281.com-特彩吧报码开奖直播| www.39331.cc-七星彩奇偶预测精准| www.657817.com-体彩大乐透卖到几点| www.19194.cc-帝王彩-| www.084518.com-即时开彩怎么下载| www.994720.com-福彩3地试机号口诀| www.qq43.com-福彩内部人员揭秘| www.707570.com-1号彩下载-| www.873763.com-老杨说彩近15期| 博通彩票www.606614.com| www.478625.com-深圳彩票开奖| www.593100.com-哪个彩票平台可靠| www.674546.com-河南福彩官网走势图| www.756637.com-盛兴彩票v1登录| www.818958.com-有没有玩彩票高手| www.889303.com-彩神软件下载安装| www.962203.com-体彩11选五山东| 百姓彩票www.bxcp3.com| www.782244.com-凤凰彩票能不能提现| www.998132.com-北京彩票官方网站| www.sh01.com-乐8彩下载-| www.85ja.com-体育彩票胜负彩预测| www.123846.com-赚钱彩票导师| www.439356.com-北海体育彩票| www.0308.loan-福利彩票前景如何| www.660729.com-时时分分彩开奖号码| www.952991.com-湖南体彩官网| www.062123.com-快三提现退回| www.09622.com-下载彩名堂-| www.91791.cc-青海体彩开奖结果| www.688670.com-248a1彩票-| www.787956.com-今天足球比赛竞彩网| www.op11.com-有人带着玩彩票骗局| www.650107.com-早教彩虹伞的玩法| www.785331.com-七星彩内部直码联系| www.867362.com-在线彩票都停售| www.920304.com-鹦鹉科技博彩破解| www.978928.com-500彩票全部软件| www.gd6.cc-河南福彩22迭5走| www.pi73.com-老版新浪足球彩票| www.180906.com-分分中彩app| www.466223.com-彩天下稳-| www.930773.com-体彩七星彩兑奖规则| www.820198.com-天价彩礼是卖女儿| www.959617.com-辉煌团队彩票计划| www.df45.com-福彩3d技巧规律| www.k20.cn-中国彩吧更懂彩民| www.934858.com-快彩软件-| www.975145.com-体彩大乐透中前四位| 500彩票www.303479.com| www.ct16.com-彩神是怎样的骗局| www.mz72.com-保定彩票站转让| www.661404.com-最新一期彩票| www.769352.com-体彩竞彩中奖查询| www.839250.com-777彩票网址| www.894772.com-新大陆彩票-| www.xi74.com-双彩论坛讨论专区| www.795883.com-7k购彩网址-| www.889858.com-七乐彩那一年发行| www.o00.site-中福快三开奖记录| www.314543.com-看体彩-| www.392144.com-福彩体彩开奖| www.513633.com-重庆时时彩5星复试| www.529544.com-直播彩票软件| www.231008.com-福利彩票提成| www.564833.com-体彩天下软件下载| www.042647.com-多彩贵州网董事长| www.193565.com-至尊彩10分快3| www.306777.cc-天津时时彩全国开奖| www.849635.com-天天分分彩走势图| www.936051.com-乐山快三查询| www.998551.com-广东福彩网官方首页| www.ru91.com-90彩票首页-| www.588112.com-快三冷热-| www.773753.com-时时彩稳打法| www.929173.com-萬城福彩-| www.553455.com-竞彩二串一跟单群| www.650765.com-水彩抽象画图片| www.739476.com-彩票999官方| www.859911.com-体彩排列3d开机号| www.929161.com-九万彩票可靠吗| www.983469.com-一分时时彩全天计划| www.bz90.com-5分快三害死人| www.xw92.com-举报彩票app| www.729677.com-新盈彩主页-| www.878335.com-是谁代理彩神通四码| www.962483.com-深圳市福彩app| www.hu74.com-五分快三走势图开奖| www.91ey.com-玖富时时彩-| www.2884.cn-今天彩票开什么|