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.644735.com-九千万彩票是真的吗| www.842.org-旧版彩库宝典苹果| www.91223.cc-高空彩烟25发价格| www.31515.cc-星光彩票下级| www.6250.vip-宁波彩票-| www.158022.com-捷报足彩预测| www.103365.com-福彩双色球开| www.237403.com-中国体彩网下载| www.366311.com-冀彩宝客户端官网| www.541737.com-彩三彩票在线| www.633365.com-篮球博彩2串1规则| www.857268.com-众购彩票app| www.953351.com-竟彩直播360| 幸运彩票www.444165.com| www.643883.com-中华彩票网网易| www.299721.com-冠彩网下载-| www.444864.com-彩票税太多了| www.56ku.com-南京时时彩诈骗案例| www.1149.vip-重庆时时彩预测软件| www.6548.cc-福彩三d绝密| www.22399.cc-因为彩礼分手的多| www.739952.com-万博彩票网手机版| www.cai3789.com安徽快三预测和值| www.030394.com-口袋彩票一购彩大厅| www.781984.com-福彩3d绝对布衣版| www.886184.com-微信群合买彩票| www.964634.com-彩票霸主软件官网| 中华彩票www.914908.com| www.037371.com-万能彩票过滤器| www.224422.cc-最励志的彩票广告语| www.362953.com-安徽快三大小| www.465707.com-临汾市古建彩绘公司| www.555612.com-118彩票骗人| www.641177.com-600彩票网登录| www.874924.com-买分分彩输钱经历| www.947310.com-3d麦久彩票网| www.996981.cc-彩票开奖结果百度| www.cj12.com-极速快三下载| www.268003.com-福利彩票选号技巧| www.371844.com-合肥市体彩转让| www.289332.com-17500乐彩网| www.89608.com-胜负彩4月赛程| www.112038.com-福彩3d推荐预测| www.16898.cc-全国联销图彩迷天地| www.176717.com-极速快三网址| www.723123.com-福建体育彩票网官网| www.893910.com-爱投彩票提现不了| www.37ek.com-三宝易购彩票| www.3548.xyz-福彩3d校长-| www.rb67.com-湖北快三统计走势图| www.92712.cc-聚彩官网jc-| www.082984.com-彩票工具大底| www.176009.com-快三软件app| www.256181.com-166彩票网站| www.2345.cc-五洲彩票线路检测| www.392544.com-厦门福利彩票站点| www.3754.biz-极速快三开奖号| www.985922.com-足球彩票指南报纸| www.lo10.com-网上拉人玩彩票| www.09ov.com-旺旺彩票官方下载| www.579.cm-时时彩十大代理平台| www.4743.vip-最贵彩票-| www.04203.com-手机上可以买足彩吗| www.513391.com-快三外围玩法| www.756848.com-彩色混凝土路面施工| www.948674.com-彩票店一月销售额| www.mk82.com-118彩票网络平台| www.23898.cc-带计划的彩票| www.52166.cc-体育足球竞彩胜平负| www.025441.com-江西体彩多乐彩| www.119915.com-五分快三倍投的赢法| www.v80.net-拉萨有买彩票的吗| www.199.red-初二彩铅画小人| www.851208.com-还可以用手机买彩票| www.989008.com-彩票缴税地点| www.07mo.com-三彩翡翠市场价格| www.194614.com-快开彩票平台| www.604647.com-9d彩票计划-| www.718853.com-体育彩票世界杯玩法| www.2dc.com-彩神平刷软件官网| www.46gs.com-周末彩票兑奖时间| www.501447.com-合乐时时彩-| www.892037.com-快乐彩12选5奖金| www.ma76.com-福建省福彩中心官网| www.99793.com-体育彩票北京单场| www.886403.com-大发彩注册-| www.pc9.com-派彩每日推荐| www.14ac.com-五分和彩连码计划| www.19671.cc-一分时时彩规律| www.dg13.com-百宝彩官网-| www.871631.com-利彩一分快三算法| www.3360.vip-彩乐园手机版下载| www.5733.cn-七星彩怎样选号| www.wk65.com-幸运分分彩-| www.350066.com-彩宝贝双色球006| www.rr95.com-彩票平台破解器| www.ox46.com-快三彩票人为控制| www.222744.com-内蒙古福彩下载| www.0039.vip-那种彩票奖金高| www.ih06.com-微信快乐彩靠谱吗| www.954074.com-好彩柠檬双爆好抽吗| www.8335.com-网上东方彩票靠谱吗| www.02927.com-体彩礼拜几开奖| www.978.cm-七星彩两个号码| www.565649.com-澳门时时彩走势图| www.990618.com-彩票123更新| www.yu46.com-安徽体彩网十一| www.298060.com-人人彩票是骗局吗| www.g05.top-大数定律公式与彩票| www.cai7895.com福彩3d论坛论坛| www.fj0.cc-吉林快三专家预测| www.093899.com-时彩开奖-| www.32242.com-怎么计算快三和值| www.683563.com-爱投彩票app官网| www.909848.com-三d彩界王子独胆| www.395665.com-昨天3d彩票开奖号| www.291863.cc-速娱快三-| www.168327.com-福彩快3彩票官网| www.771359.com-彩虹6号视频| www.956760.com-七星彩在今晚开奖结| www.uc10.com-彩票106封了| www.1442.xyz-109彩票安卓版| www.fi84.com-优德送38彩金| www.m50.org-彩皇网app-| www.269028.com-uu彩票网站-| www.054234.com-yy彩票正规吗| www.212269.com-大发快3买彩票神器| 好彩头www.51331k.com| www.ln52.com-旺彩推荐中奖| www.q39.cm-彩票d-| www.3398.biz-正规的皇冠彩票网站| www.018779.com-青蛙过河彩票试刮| www.964600.com-体彩开奖规则和奖金| www.969776.com-七乐彩胆拖5拖4| www.og6.com-鑫彩网是真的假的| www.441.in-优信彩票软件| www.24922.com-彩铅画法-| www.833795.com-彩票大家赢走势图解| www.024696.com-竞彩什么叫双平| www.563679.com-柬埔寨彩票开奖| www.966215.com-发彩平台-| www.qh24.com-广东福利彩票好彩1| www.8465.vip-顶尖的彩票分析软件| www.03391.com-白岩松彩票太假| www.40192.com-体育彩票自助终端机| www.860870.com-体彩山东11选五| www.794779.com-买足彩和赌博的区别| www.xh60.com-好彩2复式计算器| www.55je.com-中国体彩微信公众号| www.5119.me-app直播彩播| www.56720.com-中国福利体彩排列五| www.671102.com-s56.cc赢彩网| www.870027.com-九州彩票注册邀请码| www.989339.com-万彩吧下载安装苹果| www.vd47.com-智慧彩app快3| www.57519.cc-体彩助手e-| www.ud68.com-乐和彩app-| www.142.online-彩玉石-| www.496706.com-13彩是什么-| www.506201.com-玩广西快三违法吗| www.v78.club-体彩五字术语| www.11192.cc-足彩四场进球预测| www.0793.net-彩82邀请码-| www.404200.com-泽华彩票管理系统|