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.528765.com-163官网彩票预测| www.364338.com-双色彩球开奖| www.981583.com-福彩公证员作假| www.603517.com-彩票安徽快3| www.838196.com-今晚七星彩买什么好| www.971306.com-福彩刮刮卡有多少种| www.290838.com-合肥福彩中心地址| www.428819.com-福彩刮刮乐壕7图片| www.843109.com-福彩中心工资| www.952464.com-快频彩是什么意思| 亚洲彩票联盟www.696776.com| www.ln63.com-旺彩11选5下载| www.07ev.com-福彩怎么算奖金| www.63335.cc-19039期足彩| www.099059.com-哪个平台可以买快三| www.640934.com-凤翔彩票登录| www.744976.com-彩票分析软件违法吗| www.834835.com-好彩蓝莓双爆缅甸| www.923219.com-足彩欧赔铁律| www.988943.com-app上的体育彩票| www.ee30.com-福建福利彩票网官网| www.467374.com-体彩投注截止时间| www.829438.com-下载彩聊-| www.905059.com-彩票网赚是真的吗| www.967658.com-河南快三奖金规则| 幸运彩票www.664628.com| www.45755.com-彩票平台源码哪个好| www.055320.com-吉林快三网络盘代理| www.0308.vip-未来彩票行业发展| www.149975.com-掌中彩一福利彩票| www.665640.com-红字体彩店app| www.19ap.com-周五有什么彩票| www.1506.pw-彩虹的约定原唱| www.qp86.com-pc28彩票骗术| www.302.me-买了多年彩票| www.540675.com-大乐透彩民乐图彩坛| www.745421.com-体彩金孔雀连出吗| www.503244.com-福彩开奖数据分析图| www.zu64.com-汇彩彩票官网| www.096046.com-体育彩票那一年发行| www.30263.com-福运彩是合法的吗| www.885753.com-55彩票下载-| www.968784.com-乐彩vip安卓| www.cai0600.com宁夏快三开走势图| www.wn33.com-235彩票平台| www.81228.cc-网络博彩被骗怎么办| www.a97.com-游戏《彩虹伞》教案| www.k58.com-大发快三彩神| www.1333.vip-怎么举报私彩| www.6830.cn-下载够力七星彩图表| www.34134.com-福彩三地谜语总汇| www.5510.vip-新昌双彩茶苗| www.690532.com-体育体彩中奖排行| www.zj23.com-好运3中奖彩票| www.42112.com-彩票守号十二年| www.936258.com-苏州体育彩票店转让| 500彩票www.52072z.com| www.911534.com-湖北快三末出号统计| www.992017.com-普通体彩是几位数| www.er63.com-中原福利彩票开| www.558666.com-夸女生的彩虹屁| www.648058.com-彩宝种类大全| www.726771.com-那个app能买彩票| www.809255.com-体彩中奖概率怎么算| www.893063.com-时时彩缩水网页二星| www.961240.com-什么人会中彩票| 乐博彩票www.67258d.com| www.178134.com-快三就是一个骗局| www.65nx.com-浙江福彩app| www.076321.com-彩票中奖530万| www.182317.com-中国竞彩网竞彩| www.260511.com-微信赌彩-| www.757502.com-河南各县彩礼排行榜| www.908567.com-七星彩随机选号一注| www.967401.com-手机网上怎么买彩票| 亿彩堂www.87668u.com| www.529039.com-七乐彩专家杀号澳客| www.6er.cc-中国靠彩票发家| www.0851.link-9购十分彩靠谱吗| www.53ki.com-红利彩票是什么| www.7711.live-中华彩票网3d开机| 快彩在线www.2632c.com| www.103454.com-丰彩的中奖率怎么样| www.213894.com-香港六合彩| www.316439.com-山西3d彩民乐| www.6849.xyz-今日的彩报图| www.195799.com-青海快三走势图软件| www.452897.com-竞彩收米app| www.598422.com-九九彩玄机精华帖| www.04305.com-吉林快三出号走势图| www.881450.com-时时彩金鹰团队计划| www.891073.com-大奖彩票下载安装| www.972269.com-红彩快3-| www.m32.com-甘肃的快三开| www.59200.com-600万彩票网| www.026740.com-凤翔彩票登陆| www.159963.com-彩票360下载安装| www.247307.com-全国最大人人快三| www.325965.com-合彩王中王开奖结果| www.480374.cc-足彩必发指数新浪网| www.557715.com-福彩等级怎样分的| www.630110.com-浙江十二选五爱彩乐| www.709051.com-七天彩票是真的假的| www.777681.com-福彩丹东全图总汇| www.851178.com-时时彩推广技巧| www.905500.com-吉利彩票倒闭| www.971102.com-体彩有哪几种玩法| 500彩票www.394577.com| www.fq41.com-竞彩比分500直播| www.058678.com-福彩便民中心开机号| www.997998.com-双色球筱杉众彩网| www.ky21.com-彩票99客户端下载| www.j81.me-体彩竟彩足球比分| www.261.me-彩票国际黑钱平台| www.4500.vip-彩票全国开奖3b试| www.21888.cc-什么是网上刷彩| www.033003.com-体育彩票打票教程| www.795554.com-河北体彩福彩玩法| www.876458.com-基诺彩票怎么买| www.bg29.cc-赢家彩票注册邀请码| www.10ia.com-ee彩是真的么| www.292.club-鸟入屋七星彩是什么| www.6977.in-中奖彩票视频| www.119571.com-福彩快3贴吧论坛| www.27892.com-玩足球彩票技巧| www.53792.cc-南国彩票梦册| www.039880.com-瑞彩-| www.177215.com-甘肃快三彩经网| www.715786.com-500彩票计划| www.858375.com-福利彩票停售后| www.cai4966.com甘肃福彩快3开奖号| www.172123.com-多乐彩投注-| www.07000.cc-工商银行彩票| www.a85.top-稳定的足球彩票| www.895323.com-优彩师官方网站| www.aj89.com-七星彩今期-| www.874504.com-大乐透彩票开奖直播| www.962400.com-旺旺彩票官网| www.am48.cc-如何购买双色球彩票| www.934938.com-彩票下载ios| www.4108.vip-云彩厅里有苏州快三| www.74828.com-足彩分析软件免费版| www.492189.com-棒棒彩票苹果版| www.a17.biz-新浪爱彩是真的吗| www.37166.cc-i8彩票app-| www.877467.com-七天彩票注册网站| 彩71www.488018.com| www.71zm.com-彩票走势图有哪些| www.06np.com-兰州福彩快三| www.79778.cc-339彩票下载安装| www.5514.cc-彩虹下面吉他谱原版| www.60116.com-西奇城彩票-| www.37cd.com-体彩七星彩开桨接果| www.506886.com-体彩开奖玩法介绍| www.3317.in-768彩票-| www.854822.com-金冠彩票app下载| www.948829.com-乐彩论谈静态版| www.990639.com-江苏省体育彩票官网| www.ar37.com-彩35-| www.776467.com-体彩三d开奖| www.894796.com-彩票中奖地区能查吗| www.954609.com-体彩胜负彩规则| www.994942.com-彩票中奖符图片| www.ig.com-福彩中心-|