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.719218.com-彩吧3d迷图第三版| www.844456.com-福彩双色球几元一注| www.377597.com-福利彩票店经典对联| www.fn48.com-福彩快3官网登录| www.4728.cn-中彩票不给钱| www.384618.com-澳客彩票pc-| www.33319.cc-有三分钟时时彩的吗| www.0566.com-迅盈彩票是真的吗| www.yd81.com-揭秘大发快三的骗局| www.671541.com-高频彩追杀-| www.802638.com-彩界九哥预测| www.899383.com-博发彩票是否违法| www.zz20.com-体彩标志中间尺寸| www.7510.cn-彩票店有没有刮刮乐| www.03fn.cc-彩票k线软件手机| www.639794.com-牛牛彩代理-| www.04140.com-怎样玩高频彩| www.bd84.com-三分彩怎么玩| www.956550.com-买彩票把钱输光了| www.517209.com-4146牛彩-| www.593009.com-彩虹家族卫星| www.163990.com-玩彩票什么叫做大底| www.487795.com-好好彩网-| www.393962.com-昨天的福彩开奖亏| www.668226.com-影片中彩票中奖号码| www.63uk.com-彩票程序搭建多少钱| www.7647.com-香港青蛙彩-| www.76856.com-新浪竞彩2串1推荐| www.4796.top-彩虹六号被禁原因| www.143291.com-彩虹8官网-| www.dp69.com-老快三遗漏数据| www.509737.com-博彩平台是合法的吗| www.514690.com-澳洲彩票网址| www.24786.com-彩铅梦幻鹿-| www.527663.com-时时彩容错做号法| www.605882.com-吉祥彩票网址是多少| www.333104.com-究竟怎样才能中彩票| www.3377.website彩票好平台-| www.509108.com-利彩彩票安全吗| www.120851.com-qq博彩群号-| www.88596.com-九彩彩票手机版下载| www.790229.com-炫彩图片大全| www.541946.com-海南彩开奖下载| www.639700.com-竞彩政策-| www.725642.com-大发快三一分钟计划| www.800112.com-福彩快三驾吗| www.af56.com-七乐彩开奖查询| www.948599.com-武汉福彩-| 亚投彩票www.299058.com| www.6558.vip-盈丰彩票靠谱吗| www.8en.com-福彩刮刮乐国泰民安| www.70mq.com-2034盒子彩漫| www.31558.com-凤凰竞彩是真的吗| www.wq09.com-中彩网11选5| www.226063.com-跟导师买彩票赚钱| www.c13.bid-彩票pc蛋蛋-| www.360056.com-集彩通怎么兑换彩票| www.518522.com-u58发发彩下载| www.586192.com-66微彩-wap站| www.668493.com-博彩对冲-| www.780933.com-手机彩票幸运28| www.862986.com-上期福彩开奖号码| www.929818.com-体育彩票这么玩| www.981770.com-彩票双色球手动选号| www.bf23.cc-百胜快3彩票app| www.85648.com-彩票坑穷人-| www.080903.com-上海快三骗人吗| www.206604.com-各种彩票大厅| www.327559.com-湖北快三开奖结果| www.460084.com-cf炫彩背包-| www.180460.com-快三平台合法吗| www.450384.com-重庆彩八万-| www.568677.com-彩678是骗局吗| www.526597.com-私彩非法经营| www.632392.com-竞彩258球迷| www.735544.com-吉祥彩0500cm| www.813385.com-宁夏彩票中心在哪儿| www.895723.com-深圳快三开奖查询| www.271608.com-好彩一网上开奖结果| www.408532.com-国庆节彩票放假| www.65187.com-青海西宁福彩中心| www.94559.cc-什么叫基诺型彩票| www.570067.com-做彩票的领先团队| www.096360.com-福彩体彩能一起开吗| www.562095.com-可靠一点的黑彩平台| www.65zi.com-198彩登入-| www.90838.cc-双彩球开奖洁果| www.062972.com-自动彩票售卖机加盟| www.882085.com-彩票兼职投注手群| www.956886.com-hk手机免费百彩网| 全民快乐8www.qmkl6.com| www.079216.com-江苏彩票手机投注| www.276744.com-江苏快三杀号公式| www.379526.com-玩彩票700万彩票| www.0282.xyz-彩票的概率是多少| www.45155.com-缺钱买彩票-| www.969253.com-众彩易购有托吗| www.ck1.com-时时彩怎么玩才赚钱| www.631327.com-看彩票开奖的软件| www.701023.com-足彩对阵表分析| www.767186.com-凤凰时时彩正常登录| www.829696.com-6合万彩400-| www.886931.com-大马彩票违法吗| www.947753.com-浙江十一选五爱乐彩| www.986449.com-竞彩篮球开奖结果| www.lq9.com-河北快三豹子| E彩堂www.43818z.com| www.289.biz-彩票输惨-| www.70354.com-玩彩计划群聊| www.70147.com-8彩票下载-| www.582325.com-冠彩彩票-| www.741198.com-体彩跟双色球的区别| www.850491.com-澳客七星彩杀号定胆| www.949663.com-今日体彩中奖号| 豪彩VIPwww.117318.com| www.9361.vip-乐城彩票违法| www.012656.com-廉江好彩哥交流论坛| www.pk99.com-北京快三早晨几点开| www.122786.com-天天彩票网可靠吗| www.751823.com-彩票1号平台| www.842244.com-玩彩票怎么资金分配| www.970711.com-关于彩票句子| www.48pz.cc-爱心彩票-| www.4296.biz-k彩平台手机版登录| www.671419.com-时时彩走势图彩經网| www.318490.com-福彩排列3奖金| www.915248.com-淘彩票怎么买| www.995562.com-足彩盈亏指数分析| www.pl1.com-湖北快三开奖今天| www.tw29.com-360足彩军长推荐| www.179932.com-易彩快3开奖规律| www.271460.com-广东好彩一怎么玩| www.353151.com-京彩集团是干什么的| www.444892.com-福彩3d哪里买| www.42ei.com-七星彩排列五群| www.175912.com-大发快三网页计划| www.310677.com-彩票k线分析软件| www.460920.com-澳门皇冠彩票手机版| www.183882.com-彩票专家免费预测| www.162697.com-长沙彩票店转让| www.723528.com-常州体彩中心| www.209644.com-大发快三手机购彩| www.189317.com-福彩3d组六胆拖| www.739433.com-苹果网站彩票| www.223936.com-浙江体彩网手机板| www.103204.com-丰彩彩票网站| www.175635.com-快三免费破解器开挂| www.966822.com-宝马彩票计划网站| www.370129.com-公海彩票-| www.307622.com-快三彩票跨度怎么算| www.69nq.com-彩虹六号倍镜怎么搞| www.05151.cc-彩一票开奖查询| www.004314.com-竞猜足彩吧-| www.095142.com-福彩3d怎样注册| www.81sz.com-足彩双平-| www.060191.com-快三走势怎么看大小| www.95368.com-彩票属于哪种五行| www.82wr.com-下载新浪福利彩票| www.95sh.com-欧洲杯足彩怎么买| www.667669.com-香港有线球彩| www.38968.com-旺彩预测app| www.1818.com-爱米彩票下载| www.ne5.com-一分快三走势图今天| www.wq51.com-如何看彩票趋势图|