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天

知道了
彩票123现在叫什么名字 www.0446.cn-江苏吴江福彩快三| www.57bd.com-北京五分彩官网网址| www.2828.net-凤凰彩票是不是真的| www.7ny.com-彩铅情景画人物| www.527008.com-87彩票怎么发单| www.713056.com-4亿彩票下载| www.830327.com-彩票每年害死多少人| www.930339.com-搜索山东体彩论坛| www.987199.com-购彩堂网址-| www.an52.com-贵州快三号码推荐| www.zr15.com-大玩家彩票能在京东| www.993311.com-彩票计划能赚钱吗| www.dp98.com-哪个省的快三比较真| www.13706.com-重庆实时彩开奖| www.54vt.com-福利彩票12月14| www.3958.vip-彩票世纪ll-| www.01008.com-武汉福彩转让信息| www.56744.cc-浙讧快乐彩12选5| www.021741.com-三地彩吧图库寻码图| www.150046.com-期期中彩票结果| www.368567.com-爱购彩票是骗局吗| www.588189.com-七星彩高手论坛头尾| www.989298.com-v9彩票是正规的吗| www.do45.com-网上预测彩票号准吗| www.2hr.cc-小伙世界杯体彩| www.39350.com-3d天天中彩-| www.013574.com-七星彩涂-| www.440988.com-中国福利彩票中彩乐| www.203369.com-基诺彩票-| www.391111.com-伊布都和三彩的区别| www.539843.com-中国体彩中的数学| www.57856.cc-易购时时彩平台| www.044254.com-彩票一天赢三百收手| www.889361.com-神彩uv打印机| www.980515.com-极速一分钟一开彩票| www.rc5.com-河北快三预测号| www.181106.com-旺球彩店app| www.056958.com-哪个彩票网站可靠| www.cp822.cc-福彩快三苹果版软件| www.tc02.com-彩色的东西有哪些| www.13rw.com-七星彩在什么台直播| www.89qh.com-陕西彩-| www.2863.in-福彩3d图迷第二版| www.8550.biz-幸运彩票是什么平台| www.34722.com-福彩三b-| www.613580.com-买彩票的群-| www.696521.com-竞彩网靠谱吗| www.775062.com-玩购彩-| www.850920.com-腾讯博彩官网| www.920707.com-彩票争霸1i-| www.981428.com-足彩任九奖金怎么算| www.fr13.com-刘大军时时彩| www.500359.com-吉林快三预测和推荐| www.579592.com-澳葡风彩网址| www.08vx.com-彩票体彩大乐透| www.5528.site-手机上网能买彩票吗| www.566362.com-易彩娱乐线路测试| www.649964.com-博彩业的发展趋势| www.62vr.com-高平彩票站转让信息| www.45072.com-三地中彩网预测| www.539371.com-釉中彩餐具怎么样| www.620775.com-福利彩票26期号码| www.684726.com-下载福彩3d彩票| www.773215.com-报纸彩票指南| www.838407.com-中国竞彩计算器篮球| www.901428.com-彩票算法有规律吗| www.960778.com-彩票网注册送礼金| JJ彩票www.22603.cc| www.567961.com-彩六万购彩大厅| www.677091.com-彩色压模混凝土厂家| www.759327.com-幸运飞艇9号彩票| www.825544.com-上海快三查询图| www.887723.com-全国靠谱的彩票平台| www.954202.com-苹果下载时时彩软件| 彩客网www.ck8299.com| www.163601.com-中华彩票是不是黑网| www.295637.com-十分快三是谁开的| www.436822.com-能智能统计的彩票| www.642623.com-金山彩票是合法的吗| www.740808.com-澳彩是什么-| www.867155.com-体彩组选六8码遗漏| www.932845.com-正规买快三的软件| www.996241.com-足彩源码-| www.kh35.com-体彩大乐透跨度走势| www.5zh.com-中国彩票软件排名| www.522004.com-m5彩票手机登录| www.615810.com-中彩彩票客服电话| www.683563.com-爱投彩票app官网| www.753023.com-高频彩票害死人| www.821353.com-牛彩彩摘网福彩网| www.887095.com-彩票改vr-| www.949413.com-易彩娱乐用户登陆| www.989045.com-彩票中的三军| www.bh.com-10分快三计划网站| www.049866.com-网上彩票哪里能投注| www.001950.com-深圳福彩网官方首页| www.091521.com-703彩票ios-| www.37eb.com-7星彩专家号码推荐| www.2929.site-快三单注奖金多少钱| www.006945.com-立彩集团-| www.076198.com-江西福利彩票双色球| www.164179.com-植彩坊官方网站| www.241822.com-怎么破解彩票app| www.782673.com-双色球杀号百度乐彩| www.865542.com-竞彩网澳客网| www.944816.com-百姓彩坛那个资料网| www.986616.com-足彩310预测| www.cp8665.com-人人快三官网| www.837538.com-立彩佳美缝剂多少钱| www.896142.com-中国福利彩票网购| www.79sf.com-福彩三个号-| www.2011.net-恒发彩票网站| www.290744.com-福彩3d2元网| www.349759.com-3d五行乐彩网| www.425042.com-1赔50彩票网| www.272838.com-福彩基金用途范围| www.222350.com-快三人工计划精准版| www.331207.com-中彩股份公众号| www.403886.com-华夏彩票网站多少| www.505254.com-天天彩票怎么注册| www.012656.com-廉江好彩哥交流论坛| www.2bs.cc-手机后彩膜-| www.78ce.com-华彩赢家是违法| www.2665.wang-华彩赢家彩票正规吗| www.502680.com-678彩票网最新版| www.522332.cc-分分彩助手软件| www.90qf.com-家彩网高手论坛| www.3867.wang-福彩字迷图-| www.07978.com-长沙体育彩票店| www.85338.cc-彩票翻倍-| www.70240.com-体彩站点编号| www.031339.com-天天购彩网是什么| www.100716.com-竞彩外围有哪些| www.178322.com-快乐彩开奖结果表| www.45103.com-中彩论坛3d-| www.019373.com-大乐透中奖彩票真图| www.108063.com-足彩胜负彩开奖结果| www.233488.com-快三人工计划全开| www.430200.com-我的利彩-| www.549044.com-褔建今日快三| www.673698.com-中国古建彩绘图案| www.790669.com-随机彩票生成器| www.871096.com-七星彩排列走势图| www.937817.com-彩票代购网站怎么样| www.cp9638.com-中彩骗局-| www.066301.com-新2官网体育彩票| www.132143.com-彩礼2万少吗| www.651991.com-京彩彩票是不是真的| www.12401.com-绿好彩港版-| www.91875.cc-中国福利彩票领奖处| www.0696.pw-彩乐园注册邀请码| www.6129.cn-七乐彩有几个号码| www.643205.com-乐彩33可信吗| www.753079.com-彩神计划是真的吗| www.819659.com-体彩店每日额度| www.880947.com-彩票开奖时间一览表| www.645673.com-众发彩票官网| 彩吧www.581860.com| www.168883.com-快三屠龙技巧| www.259264.com-竞彩计算器500| www.355248.com-三d胆码彩易网| www.418588.com-中博彩票网-| www.104009.com-中国竞彩网篮球| www.29gq.com-搜狐体育彩票频道|