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天

知道了
58福彩 www.297582.com-贵州快三跨度表| www.666698.com-彩票分析师证哪有| www.18738.com-88彩票网骗人| www.057322.com-足球彩票玩法说明| www.197861.com-澳洲五分彩开奖| www.327366.com-彩票店里快彩| www.15323.cc-网上买彩票倍投好吗| www.018449.com-豹赢彩票和奖多多| www.5726.top-福彩3d直选位积和| www.350317.com-彩票78500-| www.954203.com-今晚七星彩开什么号| www.ez75.com-足彩2串1的玩法| www.b83.pw-彩678首页-| www.74tv.cc-韩雨轩七星彩预测| 大赢家彩票www.514611.com| www.584991.com-网名图标大全炫彩| www.871973.com-牛彩首页-| www.128748.com-go彩砍龙团队| www.476258.com-中国福利彩票试机号| www.128659.com-七乐彩4加1多少钱| www.385310.com-彩票百富网-| www.553213.com-贺州体育彩票中心| www.345409.com-易经选福彩-| www.032776.com-快彩电视走势图| www.154967.com-博彩打鱼送彩金| www.254159.com-糖果彩app-| www.353888.com-口述买彩票破产| www.99644.cc-中国体育彩票怎么打| www.08539.com-掌上彩票最新版下载| www.89651.com-彩烟香烟多少钱一包| www.9546.top-海南四星彩论坛| www.22113.com-2元彩票中100万| www.di24.com-彩票可以买6位数嘛| www.96jc.com-手机百度扫彩票| www.019321.com-贵阳市福彩中心主任| www.280898.com-福彩快3出号规律表| www.502399.com-彩票中奖的顺口溜| www.507952.com-二元福彩三地走势图| www.632392.com-竞彩258球迷| www.ei73.com-彩吧论坛天齐网| www.18rv.com-今天福利彩e票中奖| www.273976.com-五分快三计划网页| www.394649.com-湖南体彩兑奖地址| www.563888.com-福彩3d今日图谜| www.665524.com-3b家彩开奖-| www.734830.com-新浪竞技足彩风暴| www.668310.com-最大彩票-| www.597733.com-最新海南七星彩论坛| www.677607.com-重庆体彩大乐透中奖| www.756238.com-贵州省体彩大选五| www.821825.com-湖北快三正文| www.588092.com-精彩十分图标| www.676366.com-福彩3d钱王老头| www.772545.com-下载彩票软件送彩金| www.895398.com-华彩彩票合法吗| www.967685.com-网络彩票输了十几万| www.jh0.cc-网上买快三技巧| www.ts73.com-安徽快三结果查询| www.18pt.com-彩票中奖可以拒捐吗| www.9132.biz-足彩胜负彩十四场| www.53239.cc-时时彩人工计划稳定| www.168126.com-河北体彩十一选五| www.656957.com-马来西亚有彩票吗| www.4020.net-sb博彩公司-| www.2791.biz-k彩游戏2.0-| www.892088.com-竞彩二串一比分大奖| www.141797.com-缅甸时时彩诈骗流程| www.253622.com-博众时时彩软件官方| www.88896.com-胜负彩18125期| www.083109.com-一分快三最长龙| www.be4.com-北京福彩快三预测圈| www.0ef.com-大通彩票导航网址| www.119.biz-彩民星容三肖六码| www.17666.com-什么彩票8位数| www.021275.com-湖北体彩超级大乐透| www.124183.com-幸运彩票定位胆骗局| www.195376.com-官方彩种-| www.356779.com-生日号码买彩票中奖| www.502435.com-足彩怎么胆拖| www.1mo.cc-湖北体彩手机app| www.222649.com-七乐彩中奖查询| www.215156.com-旭彩美缝剂-| www.332340.com-彩票开奖图-| www.505368.com-快乐彩11选五上海| www.375603.com-麻将连线带拉彩金| www.45847.com-公益彩票可信吗| www.509822.com-缤果彩票下载安装| www.626229.com-连中彩票靠谱吗| www.695386.com-竞彩网支持比例| www.56ew.com-七星彩大公鸡奖表| www.098590.com-电脑彩正版资料| www.502018.com-500彩票是骗局吗| www.573115.com-928彩票app-| www.633903.com-11选5体彩走势图| www.659304.com-北京福彩网论坛| www.986695.com-一千万彩票网| www.gw23.com-彩票计划员是骗人的| www.119001.com-福彩网1分快3真假| www.cp161.com-江苏快三是什么平台| www.685036.com-港彩内部三中三| www.130081.com-彩票查询双色球中| www.912605.com-幸运一幸运二福彩网| www.bt9.cc-快三一定牛推荐| www.01hz.cc-掌上精彩-| www.6610.top-彩票中五百万难吗| www.02lc.com-世界杯会有彩票吗| www.052.com-彩票如何及时止损| www.4500.vip-彩票全国开奖3b试| www.9596.biz-彩色资料册-| www.665018.com-复试彩票多少钱一注| www.802274.com-吃鸡精彩视频| www.898118.com-中国福彩3d彩民乐| www.954940.com-黑客攻击时时彩| 金彩www.981jc.com| www.380916.com-首存元送彩金平台| www.343153.com-彩乃奈奈修女| www.432413.com-体彩二等奖去哪领奖| www.569669.com-彩票兑奖法律法规| www.oh45.com-福彩双色球百度贴吧| www.12vf.com-3d小财神彩票| www.88tt.cc-公务员开彩票店| www.1462.com-初二彩铅画-| www.6199.in-掌忧彩票-| www.66mh.com-七星彩怎么做代理商| www.0709.vip-139彩票网页| www.8240.loan-彩票和投资的关系| www.34808.cc-日本彩票开奖网址| www.526604.com-中发彩票简介| www.610295.com-油性彩铅上色教程| www.334179.com-彩票网大数据| www.064414.com-老时时彩360彩票| www.138267.com-双色球新浪彩票| www.285887.com-k彩民福地-| www.20fu.com-佬牛足彩今天的分析| www.0773.cn-苹果app送彩金| www.376009.com-安徽体彩中心负责人| www.220027.com-快三有什么技巧| www.75655.cc-模拟彩票中奖| www.032033.com-网上的彩票分析可靠| www.vf42.com-广西快三遗漏三同号| www.874691.com-中彩票图片搞笑图片| www.qd68.com-中国福彩七乐彩| www.009574.com-手机屏幕彩膜| www.354488.com-福建体育彩开奖结果| www.877225.com-七乐彩9个号中4个| www.464685.com-彩票解说-| www.211287.com-福州快三开奖结果| www.685021.com-福彩天吉网预测分析| www.568485.com-新浪重庆时时彩开奖| www.801283.com-广西快三购买技巧| www.923138.com-广州好彩1开奖结果| 爱购彩www.23636h.com| www.779019.com-3d银海彩报ja| www.x05.cn-彩票能挣钱的软件| www.76jo.com-七乐彩最新开机号| www.05gf.com-彩铅上色中性笔勾边| www.979584.com-9万彩票软件安卓| www.123055.cc-谦喜彩票网址| www.226019.com-福建福利彩票官方网| www.304360.com-江苏快三有哪些技巧| www.396703.com-我想福利彩票| www.503676.com-购彩须知-| www.565499.com-易彩账号-| www.552923.com-彩票回血群-|