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天

知道了
百盈PK10 www.62148.com-彩票大赢家开奖结果| www.095750.com-幸运快三能玩吗| www.178065.com-北京快3走势图彩票| www.261226.com-足彩最新开奖及奖金| www.333473.com-彩票好用的什么算法| www.3785.xyz-彩经网免费双色球预| www.42yi.com-体彩胜负彩怎么投注| www.099390.com-盈彩彩票快3| www.963537.com-足球彩票14场最新| www.cp3551.com-河南电视快三走势图| www.946920.com-福彩快三开奖记录| 凤凰彩票www.88266b.com| www.360083.com-青海快三彩票数据| www.482206.com-彩95黑-| www.688496.com-福彩网上投注| www.850956.com-财神分分彩综合工具| www.9665.wang-彩独中文版-| www.70022.cc-体彩篮球竞彩平台| www.39283.cc-全中彩票正规吗| www.346475.com-手机特彩吧报码开奖| www.13127.cc-足彩稳胆规律| www.74.cn-彩团网免费资料大全| www.083.me-福彩双色球预测频道| www.230113.com-彩票132苹果| www.350133.cc-买彩票不中奖| www.465800.com-5d和四维彩超区别| www.580353.com-云南彩票弃奖一览| www.682596.com-手机还可以买足彩吗| www.833551.com-c59彩票怎么样| www.948493.com-福利彩票刮刮卡| www.hw1.cc-彩票砍龙法-| www.37576.cc-中彩网统计图下载| www.76ux.com-福利彩票图迷字迷| www.356880.com-买彩票死了多少人呀| www.729772.com-彩票中大奖后的生活| www.98ei.com-许昌盛彩滴滴| www.4494.top-彩票可以刷水吗| www.3086.cn-18102彩票-| www.li60.com-中彩啦彩票下载| www.397491.com-足彩足球比分直播| www.12bk.com-福彩3近十期开机号| www.006225.com-彩788客户端下载| www.077302.com-七星彩画规-| www.1517.cc-内蒙体彩公众号| www.05122.com-玩彩软件排行榜| www.2433.pw-时时彩后二技巧绝密| www.183833.com-河北快三走势5跨度| www.315346.com-重庆时时彩平台6| www.599365.cc-秦皇岛体彩中奖| www.744402.com-奥客网足球彩票| www.832560.com-七彩云端app| www.916655.com-菠萝彩软件下载| 乐彩网www.lcw199.com| www.388762.com-买彩票照片-| www.533267.com-昨日快三开奖号码| www.615122.com-三彩女装有几个系列| www.748598.com-中彩娱乐平台| www.818161.com-足彩新浪比分| www.892540.com-全民彩官网下载安装| www.966913.com-河南快三害死人| www.cai9700.com彩票走势图入门分析| www.tl00.com-最新体彩开奖号码| www.177774.com-北京福彩官网| www.262248.com-福彩客户端官网下载| www.969024.com-众彩黑我钱-| www.gp33.cc-彩钢板围挡价格| www.6mj.com-彩票背后的数学| www.070202.com-彩神vi正规的吗| www.946559.com-查福彩6十1-| www.cai4040.com快三一注中奖多少钱| www.sw73.com-新时时彩怎么玩| www.74422.cc-篮彩算不算加时| www.045464.com-申请福利彩票站电话| www.103654.com-头奖彩票百度贴吧| www.06884.com-九州彩票是不是假的| www.101845.com-彩票平台租赁| www.232652.com-上海快三兑奖期几天| www.332766.com-京彩彩票挣钱吗| www.01ci.com-彩票对打是什么意思| www.957291.com-盈彩汇官方网站| www.g29.club-南国七星彩彩坛| www.79tb.com-有谁彩票中过大奖| www.356284.com-彩票拾取算法| www.250075.com-中彩高倍邀请码| www.374302.com-体育彩票十一夺金| www.519206.com-家彩开机-| www.1949.vip-保时捷彩票平台| www.35mg.com-周三的彩票-| www.1227.in-计划彩票app下载| www.693135.com-国外彩票代购网| www.xu23.com-彩票什么号才能中奖| www.913187.com-3d彩经网金码| 中国福利彩票www.3478a.cc| www.105142.com-新浪彩票资讯| www.198953.com-怎样买五分彩的技巧| www.337433.com-河北快三数据统计表| www.520872.com-分分彩组三组六必中| www.sa22.com-吉首快三秒电话| www.009.site-彩神赌钱-| www.8656.in-世界杯彩票软件下载| www.008674.com-福利彩票今天晚上| www.2238.pw-历下体育彩票| www.439739.com-体彩大乐透后区中奖| www.618597.com-体彩经营-| www.759261.com-体彩种类和奖金| www.864815.com-手机上如何买福彩| www.984920.com-体彩预测软件下载| www.057367.com-江苏福彩公告| www.307298.com-爱乐彩吉林快三| www.425335.com-人人体彩网-| www.550248.com-彩票扫码摇大奖| www.ug08.com-大乐透杀号彩宝贝| www.555356.com-七星彩三等奖几个号| www.26649.com-足彩那个网可以买吗| www.493801.com-今晚彩票开的什么啊| 瑞彩网www.809215.com| www.ej69.com-杭州快乐彩中奖方法| www.36ax.com-海南七星彩最新长条| www.71081.com-福彩正规购买平台| www.212913.com-app彩票软件制作| www.717236.com-彩铅主题画图片大全| www.855939.com-时时彩小妙招| 天下彩www.458689.com| www.819909.com-28万彩礼灭门惨案| www.37pm.com-体彩十倍幸运| www.165226.com-成功彩票登入| www.911057.com-怎样买福利彩票赚钱| www.983551.com-福利彩票四等奖兑奖| www.am5.cc-河北快三开奖号遗漏| www.147854.com-163a彩票下载| www.365987.cc-顶级水彩颜料品牌好| www.60031.cc-66官方彩票安卓版| www.080698.com-快三群主-| www.072601.com-骰子大小彩票软件| www.819357.com-河南彩票兑奖地点| www.ib04.com-安徽省彩票兑奖地点| www.h76.club-名人彩票-| 福利彩票www.99677r.com| www.7658.cm-体彩柜台最新| www.vx82.com-互联网彩票停售了| www.218250.com-吉林快三稳赢打法| www.076339.com-福彩湖北省快三开奖| www.311141.com-红旗彩票39957| www.434643.com-xy969幸运彩票| www.42wp.com-广元做彩钢围挡定做| www.9126.pw-彩票复式是什么意思| www.790692.com-彩票随机选号| www.885352.com-神州彩运-| www.cai718.com-快三算号器手机版| www.030224.com-玩彩网app官网| www.5398.cm-4个数的彩票| www.11090.com-可靠的彩票投注网站| www.6532.com-福彩三d有规律吗| www.53374.com-彩虹5无人机| www.368736.com-大众娱乐彩票app| www.472618.com-斯洛伐克快乐彩开奖| www.536410.com-编程实现彩票走势图| www.592922.com-彩虹7号配置要求| www.56ok.com-富彩彩票正规吗| www.763.la-时时彩跟彩票一样吗| www.t20.club-体彩合买骗局| www.250818.com-全能预测彩票软件| www.800075.cc-快三只追冷号怎样| www.876458.com-基诺彩票怎么买|