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.476158.com-乐福彩票是正规的吗| www.81qx.com-盈彩彩票app官网| www.52lw.com-丰彩保温隔音板| www.41493.com-彩票程序原理| www.423850.com-邪恶木全彩妖气| www.pj68.cc-五百万彩票图| www.690412.com-中国足彩网靠谱吗| www.822611.com-山东福彩群英会欢迎| www.296700.com-惠民彩票是真的吗| www.16kb.cc-福利彩票3d上期| www.086835.com-彩福软件-| www.198034.com-打快三一注多少钱| www.313603.com-好彩客官网方下载| www.yr12.com-福彩双色球凤彩网| www.86262.com-开彩票店投资多钱| www.237314.com-嘉兴福彩网-| www.160165.com-登录奔驰彩票app| www.383366.com-19029体彩预测| www.834241.com-好彩蓝莓双爆焦油量| www.cai867.cc-上海快三开奖查| www.48gj.com-网络推销彩票违法吗| www.cai960.com-快三倍投必死| www.018090.com-星彩网3d论坛| www.551101.com-时时彩追号稳赢技术| www.642887.com-七七彩票-| www.720769.com-彩票2元旧版本| www.182412.com-500vip彩票-| www.75ky.com-三十六计赢足彩文库| www.23877.com-3d乐彩网-| www.26kj.com-澳客电脑竞彩版| www.1553.cm-福彩3d杀号定zx| www.788905.com-足彩单场分析| www.29575.cc-乐彩网站-| www.96755.cc-网络私彩破案近期| www.107185.com-彩票平台怎么找漏洞| www.273975.com-分分彩计划-| www.314022.com-手机看舟山体彩飞鱼| www.197712.com-彩八app下载安装| www.21504.cc-彩票代玩账号微信| www.247044.com-湖北快三随州论剑| www.86oh.com-彩票刷流水不被发现| www.272651.com-福利彩票有哪几种| www.568908.com-诺亚国际彩票| www.181940.com-中国福利彩票3d| www.267112.com-彩票排列五走势图| www.80287.cc-网上彩票投注| www.072805.com-聚富彩app-| www.59398.com-彩铅古风人物画| www.867060.com-v8彩票5048-| www.8056.vip-创意水彩展-| www.lm62.com-中彩娱乐6-| www.28xu.com-天鲸娱乐彩票| www.2286.net-天天送彩票app| www.486794.com-代打彩票平台哪个好| www.601560.com-中彩网谁会玩| www.690759.com-澳客足彩网胜平负| www.774426.com-彩票七-| www.8895.org-今日竞彩串关| www.62358.com-彩种极速快三违法| www.905208.com-新浪竞彩足球推荐| www.981417.com-辽宁卫视老梁彩票| www.iz1.com-内蒙古快三官网| www.nj30.com-福彩走势网首页| www.85881.com-3d牛彩推荐号| www.397205.com-体彩春节后开奖时间| www.139904.com-上海体彩中心地址| www.212467.com-最大私彩网站| www.393662.com-昨天福利彩票| www.15717.com-彩铅画入门教程书| www.82949.com-五百万彩票注册网址| www.125218.com-体彩票号几种| www.206612.com-内蒙古快三选号玩法| www.588879.com-旺彩软件下载ios| www.673818.com-彩客竞猜彩票分析| www.753573.com-排五中奖彩票图片| www.884503.com-三d双彩图-| www.981826.com-28彩票平台网址| www.km46.com-易彩快三邀请码| www.645137.com-新彩陶瓷课堂小结| www.783336.com-网络彩票举报网址| www.862544.com-今晚彩票开奖号| www.920026.com-彩名堂app苹果| www.971256.com-福彩赛车怎么玩法| 大赢家彩票平台www.679975.com| www.66780.com-福利彩票如何推算| www.273687.com-时时彩团队送彩金| www.366786.com-02838搜彩网| www.790105.com-福彩2018150| www.575664.com-60彩票网站-| www.708485.com-大发时时彩后二技巧| www.803343.com-体彩排三开机试机号| www.895040.com-福彩投资-| www.956172.com-速盈彩票网站| www.cai1230.com福彩快3开奖结果| www.tg47.com-附近福利彩票投注站| www.ak41.com-河南快三投注分析| www.d28.org-七星彩梦册解码大全| www.871347.com-彩票高賠率平台| www.990077.com-釉中彩和釉下彩安全| www.cr10.com-彩客站是真的吗| www.x69.biz-天子手游彩票| www.3092.cc-体彩排列五中奖秘诀| www.792234.com-彩票预测系统源码| www.862842.com-3d开奖七乐彩开奖| www.925167.com-一分分彩-| www.975473.com-蚂蚁彩票可靠吗| www.cai6077.com快三顺口溜-| www.kd95.com-新快三娱乐-| www.io03.com-齐鲁风采七乐彩规则| www.13uu.com-福彩快三查询表| www.064500.com-私彩平台修改器| www.601445.com-网络彩票怎么刷流水| www.749848.com-好彩堂马会开奖记录| www.901791.com-彩票黑彩取不出来钱| www.41956.com-9d彩票网址-| www.203023.com-福彩双色球湖北彩神| www.250591.com-天天中彩正规么| 鑫亿彩www.308069.com| www.99mu.com-乐彩网3d预测分析| www.072398.com-秒速时时彩开奖视频| www.120128.com-宝马彩票网址| www.24232.com-大发彩票信誉怎么样| www.217187.com-私彩快三代理平台| www.163073.com-体彩排列三兑奖规则| www.88608.com-588彩票-| www.9212.net-小鹿彩票计划| www.006046.com-m8彩票软件-| www.075565.com-吉祥彩最新登录地址| www.148855.com-彩票大小单双怎么算| www.218622.com-内蒙古快三技巧规律| www.384665.com-大王彩票网-| www.589530.com-七星彩所有组合都中| www.693345.com-东森彩票-| www.398899.com-彩开票开奖-| www.578117.com-吉林彩票管理中心| www.655253.com-m8彩票下载-| www.dd.cc-中彩彩票app下载| www.rl71.com-北京彩票中心官网| www.491789.com-彩票009下载| www.560662.com-福彩三地阴阳走势| www.619793.com-汪先生的金口诀测彩| www.680668.com-宁夏体育彩票中心| www.746263.com-彩贴吧49949| www.4386.com-成功彩票对打套利| www.29002.cc-众彩网紫萱-| www.260959.com-彩票选号神器平台| www.198005.com-兰州快三开奖号码| www.399945.com-体彩排列五在哪买| www.501657.com-体彩刮刮乐数字代码| www.556097.com-乐彩神平台-| www.616589.com-体彩送汽车活动情况| www.279094.com-快三中什么是杀号| www.356967.com-彩票的意义-| www.359377.com-七星彩打奖技巧| www.714443.com-七乐彩大小走势图| www.795753.com-快三这样挣钱| www.860838.com-快彩开奖-| www.911882.com-天天彩票集团| www.964094.com-新彩吧福利3d字谜| 易彩网www.335021.com| www.qr35.com-福彩公益金的用途| www.4348.com-邢台市福彩中心官网| www.29749.com-网络彩票骗局经过| www.441949.com-体育彩票怎么申请|