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.wv94.com-糖果派对四个彩金| www.1xv.cc-手机打印机彩色6色| www.35989.com-炫乐彩票怎么样| www.750441.com-豪彩官网注册| www.589646.com-体育彩票19095| www.483118.com-金彩在线登录网址| www.976254.com-广西结婚彩礼多少| www.3171.in-新看彩啦3d-| www.439419.com-贵州体彩大乐透开奖| www.666976.com-乐彩软件正规吗| www.522169.com-分分彩后二复式绝技| www.639923.com-东方彩票手机软件| www.688845.com-拼搏在线彩票网| www.oy98.com-宁夏福彩快三玩法| www.391358.com-l8彩票-| www.583732.com-彩票走势图没有更新| www.659878.com-朋友圈彩票骗局| www.732796.com-…江苏体彩网| www.805056.com-手机竞彩软件| www.876669.cc-重庆时彩助手软件| www.951748.com-cc分分彩开奖结果| 688彩票www.055.la| www.517002.com-中彩网彩票怎么样| www.362978.com-描写彩虹的成语| www.507662.com-福彩69期开奖| www.637351.com-彩红时时彩官方网站| www.766342.com-福彩时时彩10分钟| www.909252.com-dd彩票-| www.av30.com-中彩票两亿的小说| www.82eh.com-点击彩极速赛车| www.192227.com-彩7-| www.355434.com-彩经网是什么网站| www.496128.com-香港彩票投注网站| www.568418.com-体彩蓝齐儿断组| www.911505.com-网易福彩开奖| 幸运彩票www.73166b.com| www.hx27.com-湖北快三热点早知道| www.859187.com-彩芽的天真好奇心3| www.945036.com-17500彩票论| 竞赢彩票www.86889.cc| www.053853.com-世界杯足彩怎么玩| www.121805.com-宝马彩票事件| www.802617.com-彩神爷算胆-| www.1041.vip-五分快三预测网站| www.422698.com-体彩logo图片| www.621282.com-彩票之家解正版成语| www.rg33.cc-广西快三作弊| www.681986.com-中国有几种彩票合法| www.111684.com-一分快三长龙记录| www.66js.com-七星彩直码定位| www.2207.org-求购彩票套源码| www.8483.org-易彩5115-| www.26yu.com-乡镇彩票店怎么加盟| www.34648.com-百度乐彩彩票| www.010799.com-海南七星彩私彩网站| www.981868.com-大运彩票平台网址| www.588599.com-七乐彩19024| www.324835.com-彩票图表走势图大全| www.0832.in-足彩店月收入| www.vk82.com-体彩排列5中奖规则| www.0657.xyz-福彩的装修-| www.423163.com-体彩图标logo| www.234476.com-怎么在微信上买足彩| www.640069.com-彩虫安卓手机版下载| www.789364.com-彩妆店图片-| www.878961.cc-彩票号码是几位数| www.953445.com-品乐彩店-| 福彩www.15355w.com| www.3327.cm-彩色装饰画人物| www.9651.xyz-众乐彩是黑平台吗| www.86387.cc-新彩吧-3d字谜| www.78427.com-双彩网官网-| www.076012.com-达人彩票网站| www.253521.com-两分时时彩是骗局吗| www.500833.com-一寸彩照是什么| www.436969.com-怀化体育彩票| www.530806.com-马可彩铅哪个系列好| www.593380.com-九彩集团-| www.663816.com-分分时时彩源码| www.726308.com-石家庄福彩中心| www.788856.com-竞彩比赛投注量| www.862202.com-腾讯彩票手机客户端| www.927114.com-天天彩票如何| www.981624.com-彩票平台对刷赚流水| www.gd63.com-彩票的种类及玩法| www.530430.com-时时彩八码选号技巧| www.577033.com-七星彩开奖今晚| www.661685.com-足彩买8串8-| www.726813.com-彩票下载苹果版| www.790888.cc-今晚福彩3中奖名单| www.916998.com-彩客网首页擂台| www.cai9733.com广西快三最新开奖| www.639601.com-体育竞彩店前期投资| www.456933.com-重庆市彩时开彩记录| www.x38.bid-时时彩胆码计算公式| www.76il.com-新加坡金都快三查询| www.359312.com-体育彩票去哪| www.602106.com-彩票中奖询查| www.742742.com-俄罗斯彩蛋价格| www.855337.cc-天齐网彩吧-| www.576260.com-体彩湖北十一选五| www.659148.com-网易直播七星彩直播| www.722023.com-足球彩票分析预测| www.794229.com-买彩票属于赌博| www.869664.com-彩票开奖app下载| www.926815.com-怎么戒掉彩票| www.989422.com-乐彩彩票怎么登录| www.lh2.com-快三怎么玩稳赢| www.wt23.com-双色球彩票指南彩报| www.661575.com-竞彩平局中奖单| www.789700.com-竞彩被骗套路| www.888222.cc-乐合竞彩靠谱么| www.978967.com-快三秒饮品加盟| www.mo0.com-广西快三预测号码| 新盈彩www.xinyc3.com| www.793600.com-如何计算彩票| www.909929.com-中彩票要什么命| www.984771.com-手机打彩票赚钱吗| www.004208.com-福彩布天下图| www.955.bid-彩票那种简单| www.002280.com-七乐彩复式对照表| www.194650.com-福彩三d大小走势图| www.972340.com-体彩开奖结结果今天| www.k57.net-彩票输钱能追回吗| www.625217.com-开心彩票官网| www.687202.com-哪个网站可以投福彩| www.771490.com-重庆市彩时彩开奖网| www.851163.com-时时彩推广手段| www.905730.com-手机够快彩-| www.956108.com-体彩足彩竞猜网| www.998545.com-汕头福彩-| www.ba35.com-内蒙古福彩下载安装| www.884730.com-重庆肘时彩开奖历史| www.966795.com-宝马彩票案-| 网易彩票www.501210.com| www.xj09.cc-好彩3复式计算器| www.34op.com-彩运来登录线路检测| www.9951.org-彩票坚持几年会中奖| www.719691.com-中国体育彩票500| www.816782.com-天天中彩票中奖截图| www.722872.com-好彩票7168-| www.807852.com-杭州竞彩中心地址| www.512032.com-彩票万能计算器| www.183863.cc-河南快三预测推荐| www.498868.com-体彩大乐透前区中一| www.33228.cc-四川体彩金七宝| www.104102.com-310竞彩足球| www.386068.com-彩票店怎么买机选| www.045239.com-博发网彩票-| www.753234.com-中彩2020-| www.871152.com-七乐彩201-| www.ij59.com-新九州彩票-| www.232732.com-彩票高手预测排列三| www.352216.com-完美彩票i-| www.225725.com-英国官方时时彩| www.57uz.com-7o3彩票首页| www.13rs.com-山东彩票手机投注版| www.641.date-澳客彩票安卓版下载| www.4948.wang-9d彩票网-| www.20983.com-彩票争霸邀请码| www.gz38.com-大发彩票手机app| www.436.cc-大乐透彩民乐图片| www.5500.cm-彩虹岛水果作弊器| www.793863.com-交友博彩骗局|