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.777273.com-彩神通软件苹果下载| www.900381.com-江苏福彩开奖查询| www.967137.com-快三对子号组合表| 如意彩票www.565516.com| www.ws0.cc-中国彩票开奖大全| www.229.space-微信如何购彩票| www.18ir.com-七乐彩今开奖| www.529223.com-热门彩票开奖网站| www.629881.com-时时彩半顺怎么买| www.318448.com-重庆时时彩官网彩票| www.407742.com-中国彩票最新版下载| www.7407.org-中国彩票的监管部门| www.225032.com-五分彩秘籍-| www.297339.com-快三能手机上玩| www.008126.com-周五开什么彩票开奖| www.018961.com-彩票缩水助手| www.229772.com-上海福彩网官网查询| www.326352.com-网易彩票红球杀号| www.9449.cc-我要下载新浪彩票网| www.hn63.com-甘肃快三昨天走势图| www.13nf.com-鸿狼彩票-| www.659.me-趣9购老彩票下载| www.225605.com-安徽快三官网| www.316189.com-体彩设备-| www.656635.com-彩票机转让-| www.789170.com-彩妆盘-| www.937337.com-彩福大厦为什么便宜| www.ez63.com-01彩票ios版| www.45ho.com-香港马会福彩门户| www.3119.cm-彩票世界杯专家预测| www.133672.com-天天福彩重听在线| www.474.win-爱彩票安卓版| www.197438.com-发达彩票-| www.696171.com-新浪爱彩任九投注| www.802229.com-竞彩总进球数研究| www.906598.com-安徽快三经彩网| www.968543.com-瑞彩网论坛-| www.hk40.com-易彩票怎么赚钱| www.a73.cn-体彩排列三今晚开奖| www.449973.com-期期中彩票软件下载| www.573587.com-体彩排列三玩法技巧| www.664810.com-分分彩后三稳赚技巧| www.739955.com-新彩彩票网址| www.105662.com-709彩票ios-| www.311286.com-彩票开奖分析预测师| www.9ul.com-微博彩票游戏玩法| www.822313.com-碰碰运气选彩票号| www.900373.com-众购彩票网手机版| www.968100.com-山西体彩宝马事件| www.cai000.cc-快三开奖助手| www.365056.com-彩是什么生肖| www.531273.com-艾彩原创视频| www.22538.cc-手机购彩是骗局吗| www.y31.net-怎么预知未来彩票| www.99jd.com-彩票澳客官网| www.5821.xyz-体育彩票直选5| www.11945.com-微彩是合法的吗| www.339748.com-网上快三平台靠谱不| www.1282.bid-贵州快三结束时间| www.696446.com-体彩008-| www.787740.com-福建七乐彩开奖结果| www.xo85.com-快三推荐-| www.0863.in-体彩大乐透查询| www.526302.com-民政部福彩中心改革| www.626344.com-小站宝彩票苹果| www.925529.com-谁知道旭彩网怎么样| www.981901.com-各种彩票app| www.0530.tv-排三试机号彩吧| www.91sw.cc-0818彩票网站| www.338239.com-贾峪彩票中奖| www.506080.com-乐彩网排列三开机号| www.666696.cc-足球彩票的大品牌| www.800816.com-福彩3d今天试机号| www.922637.com-体彩竞彩开售时间| 大赢家彩票平台www.286276.com| www.975.la-本期七星彩奖表图| 彩票驿站www.2350p.com| www.kg54.com-易彩票趋势-| www.506229.com-彩虹糖减肥真的假的| www.mp44.com-快三预测一定牛北京| www.9kb.cc-七星彩私彩大奖网站| www.907227.com-河内1分彩开奖结果| www.087014.com-深圳彩福大厦不好| www.737709.com-玩彩送彩金的网站| www.828633.com-英国彩票不交税吗| www.590266.com-竞彩分析app| www.012618.com-七星彩直播开奖网站| 千百万彩票www.qbwc4.com| www.pw67.com-中国官彩-| www.35ms.com-福彩3d怎么看号| www.936.me-福利彩8可靠吗| www.30304.com-福彩3d双采图谜| www.110629.com-19年福彩初几开售| www.722046.com-七乐彩走向图| www.7609.me-新浪爱彩足球任九| www.022624.com-安徽福彩快三爱乐彩| www.351644.com-买福彩好还是体彩好| www.461200.com-彩宝网试机号今天| www.hi49.com-快三二不同号| www.6jn.com-分分彩助赢软件网址| www.0518.com-体彩大热透游戏规则| www.353005.com-鸿运彩票网下载| www.56637.cc-海盗团队彩票计划| www.163101.com-巨彩彩票能提现吗| www.623867.com-丹麦快乐彩开奖| www.980580.com-6768彩票怎么样| www.654234.com-福利彩票时间| www.733770.com-福彩6十1开奖时间| www.802116.com-天津十分彩技巧| www.871474.com-五分快三计划群| www.932095.com-海南七星彩去哪买| www.980059.com-体彩柜-| www.cai0100.com快三下载官方网站| www.561527.com-福彩双色球怎么买| www.50600.com-快彩票下载-| www.788155.com-360胜负彩-| www.442019.com-彩票店兼营业务| www.183426.com-体彩网大全-| www.739520.com-汇彩网是干什么的| www.807777.cc-好彩一八打一肖| www.157702.com-微信玩彩票是真是假| www.mg52.com-福彩快三内蒙| www.28yt.com-手机可以买彩票| www.850.me-家彩网论坛首页| www.6064.cn-奇门预测彩票技巧| www.381399.com-泰安东彩票站位置| www.50zm.com-苏州福彩官网| www.0915.xyz-彩票合买软件有哪些| www.794111.com-彩票与刑法赌博| www.428190.com-鸿彩网输死了| www.548198.com-梦兆册七星彩查码| www.716327.com-彩铅画古装-| www.818629.com-5百万彩票网官方| www.914423.com-时时彩平台是骗局吗| www.997267.com-大乐透众彩网首页| www.163437.com-福彩双色球篮球推荐| www.58682.cc-印尼分分彩在线计划| www.581719.com-永盛彩票网登录| www.095181.com-福彩了d讲做视频| www.474476.com-福彩字谜图迷牛彩网| www.112357.com-时时彩送38-| www.cai82.cc-快三走势图甘肃| www.73511.cc-吉林快三单双走势图| www.068634.com-三快彩票中奖号码| www.153819.com-七星彩多期怎么玩的| www.35cs.com-礼拜三开什么彩票| www.2245.vip-百姓彩票会员登录| www.025219.com-江苏快三下载软件| www.137364.com-刮刮乐彩票透视镜| www.260326.com-彩票赌博输钱| www.338144.com-武汉彩民中奖| www.402660.com-新浪爱彩怎么买| www.509599.com-交友网拉人买彩票| www.337139.com-中彩网与500| www.400386.com-五分彩算法-| www.519666.com-五福彩票有几个网站| www.590117.com-七星彩专家百位杀号| www.897832.com-甘肃快三群-| www.985191.com-竞彩威廉怎么看平局| www.rg45.com-福利快三真的假的| www.633381.com-体彩买双色球吗| www.702521.com-聚星彩票平台怎么样| www.764708.com-悟空彩票app| www.867656.com-七星彩头尾永久准确|