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.259890.com-天津体彩-| www.387502.com-软件彩天下-| www.509286.com-万城彩票兼职| www.602988.com-盈利彩-| www.679507.com-04100期彩票| www.782418.com-福彩蓉彩网下载| www.871416.com-福彩藏机图今天破解| www.949763.com-中华彩票李迎| 3668彩票www.3668w.com| www.38968.com-旺彩预测app| www.9926.org-结婚10万彩礼多吗| www.032134.com-体育彩票店利润| www.wr2.com-甘肃快三号码图| www.16yg.com-网易彩票为什么关闭| www.t26.top-彩票积分兑换| www.295900.com-查七星彩开奖结果| www.351222.com-体彩店挣钱吗| www.616806.com-山东体彩快3| www.72cw.com-500万分分彩彩票| www.255873.com-福彩有哪些彩种| www.381422.com-7乐彩开奖出球顺序| www.2022.net-快速彩票软件排行榜| www.gg19.com-彩票双色球专家预测| www.27ag.com-44彩票50倍-| www.2827.biz-七星彩头尾668| www.9317.biz-竞彩258足球| www.336200.cc-开彩妆加盟店| www.12840.com-足球彩票去哪里买| www.127269.com-竞彩对阵-| www.782922.com-七乐彩500走势图| www.906263.com-彩色的黑-| www.88611.cc-永信彩票是谁的| www.517788.com-今天福利彩票结果| www.37552.cc-中彩网擂台赛图表| www.517396.com-265彩票-| www.620250.com-中国福利七乐彩单式| www.719205.com-互联网彩票开售新闻| www.817789.com-体彩杀号定胆码预测| www.925998.com-福彩销售额下降了吗| 天下彩www.308680.com| www.802419.com-北站彩票站外兑| www.930738.com-福彩3d怎么研究| www.993631.com-足彩奖池是多少| www.gh35.com-中国快三大全| www.k22.cn-彩宝贝双色球杀一红| www.356098.com-腾讯分分彩规律秘籍| www.460449.com-京彩官方下载| www.569022.com-福彩中心领导| www.637365.cc-彩虹5无人机尺寸| www.716589.com-彩铅画入门基础教程| www.798756.com-时时彩胆码是意思| www.868168.com-重庆时彩开奖时间| www.928938.com-众赢国际彩票的骗局| www.323588.com-彩78彩票网址| www.69317.com-竞彩官方网站计算器| www.040704.com-博彩套利方案| www.128478.com-下载500万彩票网| www.219384.com-福建省福利彩票| www.78517.com-双彩网下载客户端| www.014012.com-七星彩上官燕最新| 乐博彩票www.314005.com| www.77xx.cc-足彩算不算赌博| www.808129.com-网络黑彩举报网站| www.69jw.com-香港球彩live| www.3768.in-七星彩开什么奖今晚| www.228662.com-彩色纸箱供应厂家| www.yf15.com-网福彩8-| www.340844.com-牛彩网摘彩网| www.412518.com-彩票计划员培训| www.510212.com-彩霸王三肖-| www.584328.com-鸿鼎彩票下-| www.103331.com-旺彩网手机版| www.y28.club-浙江彩票快乐十分| www.22020.com-人人彩登录-| www.111009.com-688彩票-| www.227189.com-保定快三开奖结果| www.338822.com-7喜彩票平台| www.343600.cc-中国3d福彩彩吧| www.276917.com-彩票总动员走势图| www.455966.com-手机彩票怎样不输钱| www.580171.com-江苏快三一分开| www.802952.com-如何看彩票中奖信息| www.899606.com-彩81平台网站| www.975032.com-网上怎样买福彩| www.wd.cc-皇都彩票快3群主| www.am56.com-福彩3d惊人的规律| www.a25.cn-福彩图片-| www.858554.com-彩神计划全能版| www.799648.com-内蒙快三49期下载| www.347882.com-天天爱彩票关闭| www.217250.com-高频彩票中奖秘籍| www.2456.win-买竞彩足球有方法| www.35ve.com-五分彩微信群| www.21673.cc-彩民之家开机号今日| www.387238.com-重庆时时彩彩预测| www.010895.com-易迅彩票app| www.w01.org-0567好彩群-| www.74101.com-快三和值大小计算器| www.812722.com-50彩票网-| www.679063.cc-乐彩网折线-| www.796489.com-头彩网快三-| www.884023.com-双阳彩票站快三黑彩| www.48428.com-体育彩票图片大全| www.525481.com-腾讯快三是骗人的吗| www.345967.cc-c8彩吧-| www.595098.com-京东快彩能买吗| www.640053.com-燕赵福彩网pc版| www.817311.com-v8彩票下载安装| www.2720.pw-湖北体彩兑奖点| www.22563.cc-万人彩票网址| www.892906.com-体彩开奖洁果| 鸿运彩票www.hy5506.com| www.58190.com-同志软件彩乐| www.493793.com-我查今天的彩票| www.689090.com-福彩3d小静预测| www.07uz.com-为什么刚力彩芽招黑| www.44296.com-全民彩票注册网站| www.92628.cc-中国体育彩票一定牛| www.14wv.com-七乐彩摇奖无规律| www.8161.net-体育彩票排列七| www.791138.cc-彩票建号大师| www.867679.com-有哪些彩票app| www.926153.com-中国那个彩票最靠谱| www.982432.com-全天时时彩计划网页| www.83te.com-世界杯足彩比分规则| www.1901.blue-3b彩票试机号| www.503731.com-博彩源代码-| www.555415.com-彩票倍率计算公式| www.5312.org-福州市体彩店| www.696003.com-竞彩串关计算器| www.796840.com-体彩任选九官网| www.985080.com-快乐彩太假-| www.56kp.com-福彩好做不-| www.11zv.com-369cc彩票下载| www.666325.com-最新阳光探码彩民乐| www.750375.com-特区彩票海南七星彩| www.ud73.com-福利彩票三位数开奖| www.055305.com-喵彩彩票正规吗| www.1200.site-人人红彩店-| www.791645.com-有玩乐利时时彩的吗| www.914500.com-彩神帝不能提现| www.9788.cn-三d乐彩论坛| www.277031.com-广西快三一定牛今| www.376525.com-31号快三开奖号码| www.206093.com-手机彩票端-| www.733926.com-福彩双色球中4个号| www.803578.com-彩圣网免费五肖资料| www.759537.com-大中华彩票集团| www.450363.com-30选7跟七乐彩| www.580859.com-喜悦彩票官网| www.7802.vip-足彩心得分析| www.56943.com-重庆时时彩最新通知| www.195563.com-吉林省快三跨度振幅| www.804949.com-3d彩票选号技巧| www.5245.vip-网上哪个软件买彩票| www.21208.com-神彩争霸2-| www.cai2266.com福彩3d开奖结果| www.602484.com-瑞典2分彩-| www.654563.com-星期四开的彩票| www.767270.com-中国福利彩票欢乐彩| www.072051.com-彩票小店宝-| www.484300.com-彩福3d买法-| www.bo25.com-梦想彩票站一分快三| www.yh49.cc-7星彩直播-|