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.622191.com-广州体彩网官网| www.11291.com-足彩十四场奖金查询| www.197699.com-彩宝网走势图| www.289500.com-内蒙快三查询| www.391120.com-四川彩票快乐12| www.516369.com-色彩静物调色公式| www.606577.com-网上停售彩票| www.679871.com-巨龙彩票怎么样| www.280578.com-彩票福彩3d走势图| www.388330.com-福彩3地历史遗漏| www.521759.com-为什么玩分分彩老输| www.609397.com-彩票买3注多少钱| www.682671.com-彩报中心3d图库| www.760668.com-体彩一共几位数字| www.844511.com-怎么开福利彩票| www.912757.com-彩客站软件-| www.973306.com-彩虹岛游侠-| www.cai2555.com湖北福彩精彩十分| www.kb23.com-中国福彩最新开奖| www.328883.com-七星彩开奖视频直播| www.49286.com-红旗彩票网址是多少| www.083603.com-彩票数字预测规律| www.795412.com-p3是机彩宝网| www.902690.com-玩快三赚钱吗| www.971015.com-彩票软件销售合法| www.490638.com-大乐透淘宝彩票| www.d21.cc-七乐彩3托9-| www.6ou.cc-彩票存款优惠| www.120.tv-彩霸王三肖六码| www.605255.com-做梦买彩票中大奖了| www.657149.com-福彩图谜第三版| www.48tv.com-天下免费彩票| www.5776.pw-美狮彩票网站| www.66632.cc-app计划彩票下载| www.18ra.com-肥城中彩票-| www.449084.com-印尼五分彩倾家荡产| www.557018.com-九龙国际彩票合法吗| www.672195.com-特彩吧app90期| www.87977.cc-体育竞彩足球| www.83nb.com-三位数是什么彩票| www.111722.com-快三什么时候有长龙| www.710654.com-彩票刷子技巧| www.669838.com-百博七星彩投注网址| www.791846.com-熊猫彩电电视机| www.910065.com-彩界神通独胆| www.982436.com-全天时时彩在线计划| www.ci72.com-吉林体彩网址| www.h47.cc-乐彩网论坛静态版| www.422141.com-体彩大乐透怎样对奖| www.625433.com-7乐彩专家杀号| www.837968.com-双色球杀号一彩经网| www.974967.com-福彩网055ecc| www.640865.com-九万彩票客服中心| 吉利彩票www.66376q.com| www.228720.com-河南彩色透水混土| www.8296.top-玩易彩-| www.b33.net-49cc彩票开码| www.rw96.com-快三四码复式多少钱| www.766604.com-网络彩票3倍投法| www.840999.com-河南结婚彩礼钱| www.903361.com-超级快三-| www.979026.com-六开彩开奖2019| www.cp1868.com-内蒙古福彩快三视频| www.zy54.com-新浪爱彩下载安装| www.588753.com-七星彩之南国论坛| www.3444.biz-有没有送彩金的网站| www.2337.win-彩88彩票现场开奖| www.7305.loan-彩虹六号好玩吗| www.99070.com-香港6万彩开奖结果| www.129252.com-快三百科-| www.977950.com-彩钢瓦墙板安装方法| www.dp77.com-福星彩-图库| www.23cb.com-彩票负盈利玩法| www.808544.com-丽彩集团郁鹏照片| www.21535.cc-福利彩票双色球规律| www.220738.com-北京5分彩-| www.487073.com-彩6彩票app娱乐| www.032962.com-派彩电子走势图破解| www.191578.com-广西快三下载| www.23809.com-七星彩摇奖机骗局| www.70518.com-买了彩票怎么看中奖| www.070978.com-上海竞彩分析师招聘| www.273167.com-l23网体彩福彩| www.452021.com-红利彩票登录网站| www.778339.com-体彩杀码定胆专家| www.984911.com-炫彩陀螺游戏| www.92ly.com-数学彩票-| www.23182.cc-双彩球下期预测号码| www.yh56.cc-百宝彩手机走势图| www.559338.com-三地杀码胆码彩经网| www.691662.com-胜负彩开奖号码| www.32206.com-易彩8位邀请码| www.89pj.cc-一定牛足彩专家分析| www.88698.com-福彩网易3d-| www.215386.com-达人彩票合法吗| www.4669.xyz-福利彩票可以追妻吗| www.13108.com-竞彩足球合买| www.126843.com-中国体育彩票排列3| www.0423.net-彩票助赢软件设置| www.4998.xyz-孕妇梦到买彩票中奖| 博亿彩票www.636by.com| www.518653.com-好乐多彩票官网| www.367307.com-彩铅画雏菊图片| www.521855.com-和彩印怎么设置图片| www.669630.com-彩钢板一吨有多少米| www.865125.com-下彩彩票电脑版| www.787331.com-开奖公告新浪彩票网| www.35ii.com-全国七星彩开奖号码| www.54nx.com-福利彩票的宝典| www.668762.com-七星彩机选5注投注| www.874766.com-亚博彩票可靠吗| www.31531.com-彩票返水和返点意思| www.550206.com-福彩刮刮乐扫码兑奖| www.071298.com-香港招聘足彩分析师| www.209399.com-大发快三怎么做代理| www.72269.cc-彩票打印不一样| www.433589.com-彩票大奖故事| www.581370.com-彩票走势看号技巧| www.350639.com-亿佰彩票官网| www.414955.com-足以傅彩是什么意思| www.311654.com-廊坊快三彩票开| www.84666.com-福彩3b牛材网总会| www.60445.com-七乐彩票app下载| www.186029.com-中福网彩票可信吗| www.577979.cc-双柏县彩鄂公路路线| www.309667.com-体彩7位数-| 来运彩票www.7777y.cc| www.587675.com-合肥彩票店铺转让网| www.867898.com-湖北快三助手下载| www.939380.com-今日头条飞来福彩吧| www.996365.com-彩票助赢计划| www.vm16.com-彩吧图彩第五版| www.54uk.com-3d福彩南方双彩网| www.397892.com-环球彩票新用户注册| www.964113.com-手机彩票人工计划| www.cp483.cc-河北快三走势图昨天| www.22332.com-北京娶媳妇彩礼| www.83np.com-快三在线计划| www.320072.com-江苏省快三遗漏| www.501852.com-乐聚彩票app| www.614009.com-苏氏彩票社区| www.751390.com-信誉分分彩平台| www.897659.com-多彩贵州城乳胶退货| www.56301.com-彩票平台骗局视频| www.178787.com-吉林快三规律破解| www.330766.com-彩票追号计算软件| www.cp6736.com-福彩快三官网直营| 乐彩网www.677038.com| www.2038.org-日本彩虹台在线直播| www.16193.cc-蓝球计算器-竞彩网| www.021447.com-亚博彩-| www.729666.com-神彩通是什么| www.791225.com-时时彩好的平台| www.877081.com-马耳他的彩票| www.937764.com-云彩厅app推荐| www.981146.com-八马彩票网站| www.cai398.com-快三倍投大忌| www.397364.com-分分彩后三做号技巧| www.762137.com-竞彩猫ios版| www.734349.com-排列三杀号凤彩网| www.819757.com-关于买彩票的电影| www.873243.com-369官方彩票| www.96036.com-福彩变为国企会怎样| www.663331.com-开个彩票店怎么样|