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天

知道了
1分快三 www.806607.com-有体彩彩票-| www.019977.com-体彩网购-| www.065533.com-108彩票-| www.753218.com-中国彩吧app| www.867946.com-海南七星彩千军万马| www.9017.biz-nba彩票分析师| www.42ag.com-福彩三十六选期开奖| www.479873.com-哪里可以买单场足彩| www.de68.com-四亿彩票网-| www.vv00.cc-彩票怎么看冷热号| www.552318.com-福盈彩票app| www.7057.biz-m5彩票代理开户| www.973995.com-132.com彩票| www.776712.com-快三线上福利彩票| www.876876.cc-大陆彩票-| www.964164.com-彩乐乐大乐透杀号| www.xk7.com-湖北快三形势走势图| www.963325.com-七星彩基本走走势图| www.cp581.com-快三赌博骗局的真相| www.167293.com-北京快三和值| www.120863.com-福彩历史开奖查洵| www.838439.com-8k彩票主页下载| www.910324.com-足彩即时比分500| www.972842.com-竞彩网电脑触屏版| www.cp1150.com-快三缩水软件手机版| www.qi31.com-好彩三八打一生肖| www.782003.com-中福彩传媒app| www.069069.cc-快三提高中奖率| www.888757.com-开一个黑彩小平台| www.eg7.cc-彩票快三破解器| www.490540.com-买彩稳赚计划| www.578328.com-甘肃体彩电话销售| www.664310.com-福彩3o选7开奖| www.745018.com-万福彩票app下载| www.832029.com-第一彩票网下载| www.85yw.com-竞彩波胆赔率| www.248503.com-体育彩票图谜| www.378978.com-nba篮球体彩网| www.um89.com-七星彩中几个号有奖| www.286672.com-挂彩票怎么中奖| www.47364.cc-幸运彩票平台怎么样| www.001234.cc-体彩竞彩足球数据| www.25553.cc-彩客网310预测| www.227600.com-快3彩票正规| www.322321.com-95彩票下载安装| www.550962.com-中国福利彩票合买群| www.620489.com-福彩票3d-| www.678262.com-特彩把旧原版| www.793043.com-福利彩票中奖领奖| www.949870.com-彩票站电视怎么调| www.fu63.com-全发国际彩票是什么| www.541736.com-快三上网导航| www.627173.com-乐米·彩票-| www.222681.com-时时彩刷反水教程| www.339796.com-唐山彩票站转让| www.254.in-体彩排列3预测字迷| www.598811.com-彩票201935期| www.629068.com-福彩3d三胆排行榜| www.222991.com-一分彩计划群| www.426004.com-足球竞彩如何跟单| www.578717.com-体彩门牌-| www.529796.com-主播彩票开奖| www.737520.com-大发快三怎么充值| www.867185.com-久久彩票app| www.972443.com-彩铅画赵丽颖图片| www.kw3.cc-广西快三走势形态图| www.584383.com-48彩票网址-| www.37ly.com-大发时时彩组六计划| www.971256.com-福彩赛车怎么玩法| www.yw48.com-至尊彩合法吗| www.833.red-北京二八彩票| www.380392.com-七乐彩19005| www.032802.com-大发快三买数字技巧| www.312991.com-今天彩票幸运数字| www.25254.cc-彩铅画简单入门| www.58378.cc-彩票快乐彩票| www.993036.com-体彩网投能否赚钱| www.et01.com-时时彩后三独胆技巧| www.wb23.com-昨天晚上的福利彩票| www.03ax.com-体彩是什么频道| www.434372.com-福彩面试些什么| www.119764.com-皇家彩世界害人不浅| www.4782.vip-永盛彩票网app| www.32377.cc-8k彩票赚钱可靠吗| www.051038.com-彩票销售平台怎样做| www.179191.com-河南快三网址| www.256514.com-安微快三一定牛预测| www.0775.site-彩播平台-| www.74iu.com-河北燕赵风彩网| www.122643.com-刷彩票流水犯法吗| www.552356.com-好盈彩票网可信吗| www.2034.org-彩虹六号iq-| 手机购彩www.529799.com| www.e12.pw-彩民网下载-| www.8594.loan-体育彩开奖公告| www.17669.cc-什么是爱彩乐| www.006746.com-体彩任选三规则| www.md8.com-湖湖北福彩快三| www.217479.com-快三破解器好用吗| www.144807.com-手机彩票33cc| www.45594.com-七乐彩开奖公告结果| www.338336.cc-福利彩票网上| www.811129.com-福彩选号方法与技巧| www.990262.com-彩票软件哪个最好| www.5bs.com-智博彩票网的网址| www.26753.cc-七星彩怎么算能中奖| www.95129.com-彩票领奖地点| www.4237.biz-武汉三彩夏装新款| www.9499.online彩票不赔的买法| www.204721.com-合肥快三彩票| www.94hk.com-怎样开家彩票店| www.7bm.com-金凤凰彩票投注网| www.700639.com-彩票破解器是真的吗| www.29vz.com-昨天福彩开奖情况| www.3717.pw-云南省福利彩票3d| www.007810.com-彩票程序的原理| www.214747.com-cp彩票靠谱吗| www.369566.com-京东慧彩-| www.637277.com-大师彩铅插画| www.841520.com-彩票内部人员改单| www.512089.com-南宁体育彩票| www.581398.com-世界杯足球竞彩玩法| www.677257.com-彩钢瓦围墙cad| www.755558.com-旺彩四肖中特图片| www.879031.com-澳洲快三开奖| www.941155.com-中国体彩票app| www.995598.com-北京单场竞彩| www.ax09.com-体彩排列3彩吧助手| www.817488.com-信用盘彩票平台| www.id5.cc-内蒙古11选5体彩| www.963584.com-3分彩开奖结果| 天下彩www.920564.com| www.996712.com-福利彩票机选和自选| www.bz29.com-c81彩票官网| www.ur12.com-淘彩吧论坛首页| www.02ds.cc-雨后彩虹简笔画图片| www.61re.com-利彩票-| www.365828.com-彩铅颜色叠加出绿色| www.692851.com-足彩即时比分彩客| www.667712.com-乐透啦彩票官网登录| www.79916.cc-福彩刮刮乐中金条| www.0852.la-江苏彩票开奖查询| www.9620.vip-星彩网网址是多少| www.1348.vip-快彩调整-| www.x05.cn-彩票能挣钱的软件| www.332544.com-时时彩黑平台| www.410082.com-中国竞彩足彩首页| www.497404.com-万福彩票手机版| www.553575.com-竞彩推单-| www.92bq.com-刷竞猜赚彩金| www.625.in-e彩在线手机版注册| www.40928.com-手机上怎么彩票下注| www.uj77.com-大家赢彩-| www.5880.cn-体彩中奖到哪里领取| www.641.xyz-鑫乐博在线彩票| www.u75.cc-新彩吧新彩网| www.282848.com-彩票33网站-| www.523248.com-亚投彩票三期计划| www.68712.com-廊坊鸿运彩票预测| www.076176.com-趣彩彩票-| www.619458.com-51彩票计划免费版| www.787139.com-彩先知预测-| www.892862.com-快三拖码全中| www.54lw.com-如何下载彩神通|