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.20cz.com-江苏体彩19049| www.858662.com-彩票开奖双色球日期| www.995971.com-缅甸版好彩双爆真假| www.dz44.com-公益福彩是违法的吗| www.y45.xyz-西安福利彩票号码| www.89di.com-关小刀足彩推荐分析| www.c7.cm-福彩快三赔-| www.731854.com-8k彩票赚钱可靠吗| www.885588.com-大发快三预测app| www.02158.cc-彩经网官方网站| www.50fq.com-今天体彩真藏机图| www.6888.cn-南阳中大奖彩票网站| www.069815.com-彩票3d综合走势图| www.268122.com-福利彩票号码怎么选| www.380088.com-258竞彩比分直播| www.551254.com-优彩网进不去| www.11nn.com-中华神洗一支彩价格| www.412.in-双色中彩网彩网| www.4994.in-梦见彩票中奖| www.18803.cc-111彩票app-| www.200255.com-q彩票-| www.503320.com-哪个彩票网送彩金| www.94ec.com-彩879-| www.5236.cm-返水派彩怎么算的| www.283726.com-彩票一般是几位数| www.365980.com-体彩排列五遗漏表| www.896.net-彩票念咒-| www.n11.wang-福彩陕西快乐十分| www.9886.space-中彩网走式图| www.az28.com-彩票往期开奖查询| www.456942.com-四川恒彩建筑怎么样| www.166615.com-快三平台下载| 快乐彩票www.35231.com| www.90pw.com-体彩足球怎么买| www.4998.biz-福建体彩网开奖结果| www.34331.com-上海市福利彩票官网| www.104916.com-好彩柠檬爆珠怎么样| www.280800.com-湖北福彩一定牛| www.442233.com-竟彩足球比分直播| www.ve21.com-易彩彩民福地注册| www.33uz.com-彩民周刊在线阅读| www.694978.com-网络彩票赌博的新闻| www.763728.com-摩羯足彩预测下载| www.870888.cc-3d彩票2元网| www.55gg.com-大公鸡七星彩软件| www.09776.com-81彩票网址-| www.63ro.com-彩票计划网架设| www.924011.com-大乐彩首页-| www.hs68.com-足球单场体育彩票| www.5324.space-4567彩票官网| www.tx12.com-海南私彩app| www.63yr.com-双色球精彩十分| www.1072.wang-时时彩采集软件| www.7294.me-福彩开奖前停售时间| www.955299.cc-2018彩票站前景| 500彩票www.338057.com| www.056369.com-够力七星彩奖表6| www.127260.com-gv彩虹世界论坛| www.61868.com-美国彩票网站| www.961005.com-安徽快三一共多少期| www.c9.me-安徽快三坐标走势图| www.ts94.com-yy彩票官网-| www.043655.com-手机正规买足彩| www.197608.com-七星彩今晚预测号码| www.023536.com-福彩六码最大遗漏| www.924169.com-4亿彩-| www.45eb.com-网络投彩平台安全吗| www.340440.com-玄武彩票正规吗| www.447999.com-新澳洲3分彩计划| www.266993.com-下载海南快三| www.342498.com-好彩频道回放| www.344482.com-国家体彩网官网| www.7781.org-七乐彩玩法与奖金| www.212.in-玩彩网安卓-| www.579334.com-齐鲁风彩彩票照片| www.141089.com-彩票老谢大乐透| www.509272.com-万城彩票注册做兼职| www.732033.com-全国各省彩礼排名| www.13rx.com-今天好彩1开奖结果| www.208995.com-黑彩做庄技巧| www.963702.com-彩客网下载安装| www.818570.com-彩票双色球在哪领奖| www.939779.com-玩彩票大概率赚方法| www.53792.cc-南国彩票梦册| www.8197.cc-彩票九苹果下载软件| www.185517.com-广西快三实时走势图| www.110874.com-哪个软件还能买彩票| www.318606.com-七星彩口诀与技巧| www.752776.com-彩票天天存天天送| www.818129.com-足彩澳客必发指数| www.881720.com-彩票计划包赔套路| www.947604.com-彩票投注怎么玩| www.992232.com-k彩彩民福地| www.bn45.com-下载易彩彩票| www.567296.com-江苏福彩六加一开奖| www.939224.com-网易足彩比分直播| www.1240.net-神采奕奕的彩的意思| www.081046.com-七星彩有中大奖的吗| www.9pw.cc-体彩一组是几位数| www.3160.cc-搜索够力七星彩| www.528768.com-画彩虹背影图片大全| www.287893.com-彩票大数据中奖神器| www.385163.com-倍率彩票app| www.961141.com-内蒙体彩中心地址| www.lc06.com-下载冀彩宝-| www.3318.biz-看彩票下什么软件好| www.8884.cc-体彩限制倍数| www.6196.cm-80彩票可靠吗| www.ct15.com-pk333彩票-| www.uc08.com-怎么做黑彩平台代理| www.344548.cc-时时彩终极平刷技巧| www.288679.com-中国福彩数字3单式| www.213005.com-哪些彩票平台靠谱的| www.289125.com-彩计划安卓版下载| www.361181.com-六冠彩票-| www.wv93.com-昨天彩票开奖号| www.962440.com-体彩杀码定胆今天| www.980661.com-易彩乐是什么网站| www.922697.com-彩色透水混凝土单价| www.c19.tv-竟彩胜平负-| www.hl10.com-足彩单关表-| www.ve16.com-河南福彩网开奖结果| www.04cv.com-v8彩票app网站| www.58pw.com-体彩大乐透网购| www.69872.com-百盈时时彩规律| www.746775.com-南国七星彩规律图规| www.813954.com-江苏快三独胆玩法| www.878757.com-福彩积分怎么下载| www.954178.com-w彩注册-| 趣彩彩票www.c177.com| www.td5.com-江西彩票中心官网| www.rd14.com-博众时时彩安卓| www.7bf.cc-金凤凰永久彩票| www.333332.cc-80彩票是什么平台| www.cn73.com-彩界联盟安全吗| www.662908.com-3d多彩网图迷总| www.163601.com-中华彩票是不是黑网| www.306863.com-哪有买彩票的app| www.369153.com-吉林快3彩票站| www.722763.com-555彩票黑-| www.795815.com-彩票魔术-| www.853761.com-天津时时彩开奖图| www.900292.com-e乐彩下载-| www.954467.com-浙江体彩网彩票| www.999196.com-一分快三平投技巧| www.vb45.com-香港权威彩神网网址| www.617090.com-冒领彩票构成什么罪| www.710179.com-怎么套彩金-| www.786735.com-k八彩票平台| www.491564.com-彩虹鱼吃什么| www.819334.com-顺顺发七星彩图规| www.913976.com-福彩三d连线走势| www.995906.com-体彩竞彩加奖| www.hg74.com-快三分分如何跟计划| www.j03.com-彩票精准计划听过| www.069256.com-百万彩票是骗局吗| www.339409.com-深圳市体育彩票网点| www.346773.com-1分赛车彩票的技巧| www.38151.com-极速快3彩票计划| www.60nk.com-彩票注册优惠活动| www.395022.com-香港天空彩免费资料| www.895722.com-高频彩票能玩吗| www.868702.com-海南七星彩手机软件| www.330.in-色彩基础理论知识|