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天

知道了
彩01彩票 www.000024.com-福彩开挂-| www.1716.wang-内蒙行快三形态| www.539000.com-牛材网彩票指南报纸| www.881200.com-制作彩票网站| www.208532.com-彩票led宣传语| www.iy16.com-杭州市体彩中心电话| www.0363.xyz-三毛彩吧平台app| www.21625.cc-时时彩开挂软件下载| www.996509.com-哈尔滨体彩中心| www.xb08.com-开心七星彩票论坛| www.672028.com-彩票销量新闻| www.762372.com-易彩怎么登录| www.852360.com-阿飞足彩乐园| www.924984.com-福彩彩票下载| www.992055.com-五分彩定胆公式| www.ag67.cc-南方彩票双彩网| www.ur63.com-彩票刷流水赚彩金| www.20bv.com-彩神网买彩票安全吗| www.1750.cm-新彩计划网址| www.7864.com-足彩讨论区-| www.34773.com-今晚开什么奖七彩奖| www.369236.com-中国福彩三d中奖号| www.570398.com-盈利彩票app提现| www.775363.com-彩票中一个数有奖吗| www.896530.com-华夏彩票平台合法吗| www.zb4.com-快三开奖时间调整| www.582888.com-三宝体彩屋邀请码| www.443110.com-赌彩争霸-| www.4ll.com-一分彩票怎么玩| www.94004.com-为什么要做责任彩票| www.129940.com-胜负彩即时比分直播| www.261725.com-3d研彩网-| www.410636.com-七彩野山鸡-| www.556783.cc-注册福利彩票多少钱| www.657020.com-黑彩稳赚计划| www.537191.com-猜冠军彩票的玩法| www.739641.com-快乐彩票网址会坑吗| www.990351.com-官方回应老梁说彩票| www.1539.cn-福彩三地绝杀六码| www.171145.com-河北省快三遗漏| 吉利彩票www.66376z.com| www.53pz.cc-贵阳彩票中心电话| www.108703.com-打错彩票店主全赔| www.289756.com-成都彩票加盟多少钱| www.940012.com-天津时时彩历史开奖| www.842567.com-体彩彩票公益金| www.578804.com-体彩不同店兑奖| www.520085.com-财神网彩票注册| www.638676.com-上海福利彩票店申请| www.056386.com-合肥彩票中奖人| www.276977.com-博彩违法吗-| www.60hv.com-福彩胆码预测家彩网| www.04140.com-怎样玩高频彩| www.054969.com-篮竞彩比分直播| www.368775.com-电脑快三计划软件| www.777037.com-彩票app宝盈| www.52005.com-吉林快三开奖奖金| www.056501.com-彩票最新源码| www.0sv.com-彩客网手机完整比分| www.877975.com-东方福彩6十1开奖| www.91950.com-福彩三d今日开奖号| www.148822.com-冀彩-| www.978334.com-梧桐彩票-| www.060821.com-浙江快乐彩遗漏| www.9066.online时彩极限打法教程| www.950463.com-105彩票下载一| www.sl36.com-时时彩组六组三全包| www.48610.com-福利彩票快三官网| www.8159.loan-最容易中奖的快三| www.007752.com-澳客彩票官网下载| www.130259.com-汇彩网是不是假的| www.071836.com-彩色纸箱厂家| www.70188.com-天下赢彩王中王资料| www.365003.cc-宝库彩典直播开奖| www.548917.com-澳门快三彩票| www.365602.cc-水彩风景-| www.6004.xyz-足彩培训师报名官网| www.830995.com-快乐彩玩法技巧| www.642121.com-体育彩票标志图片| www.562686.com-新加坡时时彩合法吗| www.977733.cc-世界杯足彩买比分| www.128888.com-环彩网官网-| www.985551.com-彩票虚拟投注是什么| www.639459.com-体彩旗舰店-| www.737311.com-电子彩票能不能买| www.981491.com-贵州省福彩怎么关注| www.791484.com-计划时时彩网| www.13875.cc-彩票跟计划投| www.230305.com-728彩票线路检测| www.968497.com-5亿彩票官网下载| www.36845.com-酷彩官网下载安装| www.565022.com-3d新彩网吧图| www.669702.com-手机买彩票哪个正规| www.616.tv-快刀时时彩软件| www.809335.com-山东体彩手机购彩| www.548986.com-118彩票安桌下载| www.175961.com-福彩快3中奖助手| www.534849.com-电玩彩票机技巧| www.885964.com-彩票平投-| www.034191.com-七乐彩哪年开始发行| www.666873.com-彩票为什么倍投| www.84066.cc-范县结婚彩礼| www.jh70.com-发彩网是正规的吗| www.685499.com-双彩球开奖结果河南| www.890923.com-彩票至尊app| www.56344.com-吉林快三亚好号| www.873949.com-中彩票交多少税| www.267513.com-彩色水磨石-| www.155875.com-201930期彩票| www.986957.com-彩先知论坛-| www.654631.com-江西省体彩-| www.547349.com-万博彩票二维码| www.718796.com-一年级彩虹仿写| 彩世界www.99788p.com| www.24447.com-彩铅星空的画法| www.268630.com-宁波快乐彩任三| www.607751.com-2019亚洲杯竞彩| www.1141.in-名人彩票_测速| www.646226.com-竞彩欧赔与凯利指数| www.09828.com-必发彩票线路| www.98283.cc-竟彩比分直播新浪| www.126497.com-乐彩网3d字谜专区| www.f67.loan-彩票第一把手| www.01mr.com-七星彩数据图表| www.117126.com-竞彩足球预则| www.307170.com-什么叫派彩-| www.pg0.cc-彩6app官网网| www.791341.com-时时彩缩水器网页版| www.540549.com-重生时时彩助手| www.cb10.com-彩6app彩票软件| www.my01.com-分分彩口诀-| www.279583.com-腾讯1.5分彩| www.701417.com-淘宝彩票怎么买| www.923285.com-补偿公告腾讯彩票| www.930355.com-竞彩规则调整| www.ik87.com-中国福彩网下载安装| www.49ba.com-七彩冰淇凌-| www.37516.cc-网上购彩是什么| www.156555.com-彩票五百万-| www.pf45.com-快三邀请码-| www.0532.xyz-快三骰子的规律| www.408336.com-海南七星彩投注站| www.990270.com-彩票买几个数| www.923666.cc-五分钟一期的彩票| www.am62.cc-内蒙快三一百期| www.387429.com-体育彩票店开门时间| www.973824.com-唯彩视频双色球宝典| www.06135.com-彩票图片素材| www.907066.com-福利彩有大发快三吗| 中彩网www.61233q.com| www.4817.vip-下载彩票彩宝| www.634725.com-建盏洋彩-| www.ut87.com-好的彩票信誉平台| www.4317.cm-可以买nba的彩票| www.650481.com-水彩樱花-| www.77357.cc-福彩出奖号码| www.361244.com-彩票三d彩友论谈| www.367676.com-体彩返奖率是多少| www.508849.com-牛逼彩票下载| www.669641.com-彩票今日运势查询| www.856856.com-领航团队abc彩票| www.5186.site-彩票3d200-| www.589932.com-星彩医学美容医院| www.530175.com-电视菜单怎么调彩|