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.791070.com-福彩机选软件| 中华彩吧www.5027.com| www.869121.com-七星彩内部泄漏| www.950916.com-彩票33软件破解器| E彩堂www.43818h.com| www.789623.com-女足世界杯有竞彩吗| www.926845.com-达人彩票被审核| www.7wh.com-七星彩长条最新空白| www.8812.vip-福体彩每日开奖| www.311586.com-10分钟开的彩票| www.505794.com-黑彩有人赚钱走吗| www.539884.com-双色球彩吧网预测| www.858448.com-彩票信用玩法| 福彩www.26878j.com| www.085970.com-重庆五星彩票| www.628675.com-福建省体彩中心主任| www.810821.com-彩尊国际时时彩平台| www.138605.com-时时彩五星计划在线| www.910778.com-k彩福地登录| www.72ip.com-真帝王彩吧图| www.9053.com-博众时时彩官网平台| www.82373.com-时时彩挂机稳赚方案| www.077813.com-百宝彩账号怎么注册| www.176718.com-江苏快三彩票合法吗| www.394808.com-彩虹代挂网源码| www.639432.com-如何申请开竞彩店| www.722763.com-555彩票黑-| www.802889.com-长沙彩票事件| www.gr9.com-上海快三走势| www.60232.com-python彩票-| 博友彩www.977657.com| www.538478.com-福彩3d大花虎图库| www.667876.com-福彩中心窝案14人| www.73sv.com-01彩票网络平台| www.43922.com-福彩交流群是骗子| www.028072.com-一号彩票骗局| www.121344.com-网络黑彩破案困难吗| www.223900.com-e球彩走势-| www.00sk.com-彩虹和倒带歌词对白| www.489413.com-三星彩票娱乐漏洞| www.965013.com-常州福彩中奖规则| www.361161.com-福彩试机号app| www.470707.com-排列3走势图乐彩网| www.866263.com-湖北体彩短信投注| www.960421.com-彩票亿元大奖| www.12lj.com-网上彩票举报| www.98hf.com-炫彩水晶泥下载| www.zb52.com-快3送彩金-| www.9775.net-七星彩2276预测| www.948426.com-体育彩票公益基金| www.tr51.com-全国彩票开奖情况| www.26yc.com-体彩排列五32期| www.595139.com-好彩堂财神报| www.706783.com-体育彩票几号放假| www.493343.com-彩钢瓦房图片| www.591872.com-混合竞彩网计算器| www.681569.com-豪彩娱乐下载链接| www.761775.com-彩之家网址平台| www.4236.vip-大奖彩票平台登陆页| www.05655.com-义乌中国体育彩票| www.61011.com-保定望都彩票中奖| www.39151.com-手机上怎么购彩| www.380722.com-彩票休市什么意思| www.539407.com-彩票怎么好推广| www.641768.com-体育彩票门脸牌子| www.90mt.com-澳门博彩一年收入| www.810633.com-彩票老店主今日推荐| www.205314.com-三分彩怎么玩| www.157678.com-足彩买胜负怎么样| www.42aw.com-足彩胜负平14场| www.020237.com-网易彩票网网址| www.595608.com-鑫彩彩票是假的吗| www.809501.com-众乐彩票是真的吗| www.964264.com-竞彩足球网-| www.622.cm-重庆时时彩预测网址| www.14084.com-彩票霸主怎么用| www.005013.com-体彩开机号近十期| www.219524.com-快频彩票kpcp| www.355962.com-重庆时时彩倍投技巧| www.651301.com-玩彩怎么规划本金| www.056067.com-香港十二生肖彩票| www.056231.com-7星彩6等奖多少钱| www.375259.com-体彩竞彩中奖结果| www.809400.com-新版87彩店ios| www.0889.org-彩站宝官网客服电话| www.6526.shop-大豪客彩票网址| www.69232.com-众搏彩票-| www.s06.net-下载买彩票软件| www.k60.in-购乐彩票app| www.49218.com-手机福彩怎么兑奖| www.8107.com-大奖赛车彩票| www.vf76.com-江苏体彩快十一选五| www.276521.com-彩票反水啥意思| www.421334.com-彩票守号有用吗| www.563603.com-网投体彩是什么意思| www.838869.com-时时彩个人赢钱技巧| www.952936.com-最新九州彩票新版本| www.nl.com-尊彩网骗局-| www.61gh.com-福i彩3d字谜画谜| www.023153.com-休体彩5d开奖结果| www.079396.com-1980彩票app| www.700075.cc-福彩3d包好玩法| www.1113.vip-tcg彩票-| www.191120.com-江苏快三计算公式| www.631123.com-今天足彩十四场推荐| www.442929.com-足彩11235计划| www.362008.com-万彩吧官方下载| www.551984.com-福彩领导-| www.818247.com-新浪彩票资讯网| www.ij03.com-福彩3d安装-| www.65qz.com-小林彩票专栏| www.41154.com-彩168彩票开彩| www.89889.com-江苏休育彩票七位数| www.972400.com-福彩3d魔图定位| www.7186.vip-世界彩宝奢侈品牌| www.235135.com-发短信教你买彩票| www.6714.cc-彩经彩票杀号定胆码| www.857696.com-做梦梦见买彩票| www.sh59.cc-彩199彩票-| www.0064.top-银行购彩-| www.8137.xyz-发梦中彩票-| www.08dy.cc-彩铅画动物简单教程| www.e21.org-凤凰网彩票网| www.8877.bid-lb快乐彩作假| www.85935.com-佳乐金街附近福彩店| www.570101.com-伊川七彩龙都靠谱么| www.499533.com-恽煌彩票网址| www.781419.com-爱彩人彩票-| www.889725.com-彩票有什么技巧| www.976006.com-彩礼2019-| www.32rq.com-福利彩票双色球40| www.5624.top-哪个软件能手机购彩| www.nj50.com-中国足球彩票玩法| www.rq75.com-马来西亚福利乐合彩| www.cai0866.com快三官方网站| www.805776.com-彩票走势图数据大全| www.908586.com-福彩宣城快三| www.984214.com-广东彩票手机版| www.ir45.com-足彩复式计算器| www.12lb.com-举报彩票平台| www.53ni.com-福彩3d几倍-| www.650760.com-水彩创意插画| www.39639.cc-盛兴彩票怎么样| www.vt15.com-快三选号技巧| www.299712.com-七天彩票网-| www.396669.com-国际财富彩票| www.538716.com-云南时时彩开奖记录| www.650888.cc-87彩店客服电话| www.736259.com-内蒙古了快三走势图| www.833212.com-南海论坛七星彩论坛| www.915408.com-竞彩258彩票官网| www.984150.com-2020彩票能信吗| www.jz53.com-七星彩奖怎么看| www.09ki.com-118彩票下载中心| www.95er.com-附近体彩中心| www.795596.com-共享彩票app官网| www.958354.com-鸿运五分彩开奖查询| www.zk13.com-江西省体彩中心| www.061036.com-河南幸运彩开奖号码| www.258366.com-竞彩买量分布| www.465247.com-彩票怎么玩才不会亏| www.859239.com-网络彩票代理犯法吗| www.nd75.com-038c彩票官方版| www.022120.com-澳客网彩网-|