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天

知道了
亚洲28 www.575445.com-福利时时彩票| www.001119.com-竞彩篮球直播360| www.558472.com-超好看的彩铅手抄报| www.98fn.com-凤凰彩票能玩吗| www.je05.com-中原彩票快三| www.01260.com-趣彩屏-| www.507035.com-北京亿彩快三| www.589308.com-七星彩清高图版论坛| www.793088.com-盐城市福彩中心地址| 手机购彩www.237399.com| www.298263.com-甘肃省福彩兑奖大厅| www.416755.com-旋风彩虹机图片| www.528321.com-揭秘时时彩平台骗局| www.617822.com-500彩票怎样注册| www.692182.com-彩票小助手计划倍投| www.785995.com-体彩今日字谜总汇| www.870396.com-彩票投注平台哪个好| www.914597.com-553彩票app-| www.432027.com-体彩贵州11-| www.094804.com-福彩七加二多少钱| www.3443.xyz-财富彩票怎么样| www.51868.com-福彩3d第72期| www.fz0.com-快三屠龙什么意思| www.ss50.com-彩票33苹果版下載| www.23ek.com-威力彩各期开奖号码| www.469.pw-青岛四方福彩养老院| www.4640.vip-福利彩票站提成多少| www.01924.com-旺彩网3d-| www.91411.com-好彩双爆蓝莓| www.317883.com-977彩票下载安装| www.527796.com-百乐彩马会总公司| www.664560.com-七乐彩工具大全| 博创彩票www.558401.com| www.88252.cc-彩票支付宝能提现| www.152352.com-彩6彩票苹果版下载| www.402766.com-新浪爱彩买不起了| www.579992.com-七星彩2284-| www.19911.cc-爱乐透手机彩票网址| www.qv15.com-甘肃福利彩票快三| www.756888.cc-有个什么66的彩票| www.850704.com-大乐透彩票截止时间| www.924234.com-体彩中心李家福| www.983380.com-彩16苹果怎么下载| www.qx5.com-彩票台北快三正规吗| www.tt98.cc-单双彩票应用下载| www.16ae.com-25日体育彩票开奖| www.828907.com-投注员打错彩票| www.956186.com-足彩胜平负开奖结果| 大赢家彩票平台www.763236.com| www.3895.org-竞彩足球在哪买| www.66007.cc-广西福彩官网开奖| www.768587.com-黑彩犯法怎么量刑| www.875456.com-体肓彩票大乐透规则| www.960960.cc-福彩快三过滤器| 乐博彩票www.003675.com| www.52996.cc-幸运彩是什么意思| www.25876.cc-聚彩彩票com| www.024709.com-足彩双平是什么意思| www.177730.com-上海快三规律| www.84ep.com-财神算号彩票软件| www.363103.com-彩虹桥客栈-| www.649494.com-3d彩票软件哪个好| www.810615.com-彩尊时时彩登录平台| www.927038.com-彩票达人三五个尾巴| www.kq27.com-江苏老快三推荐号码| www.510.org-快开彩票群-| www.299419.com-福彩开奖信息| www.04237.com-足彩概率漏洞| www.cp5510.com-快三免费稳定计划| www.583008.com-彩票k1.ccm-| www.49477.com-时时彩6期必中| www.96277.cc-福彩竞彩什么意思| www.258790.com-足彩竞猜推荐| www.127409.com-广东竞彩网-| www.779991.cc-福彩三d定位百十千| www.4zi.com-哪几种彩票容易中奖| www.08997.cc-广东福广东福彩| www.832270.com-下载龙凤彩票| 500彩票网www.922069.com| www.608945.com-腾讯分分彩杀号教程| www.233797.com-福彩体彩3d走势图| www.16hx.com-优乐彩7697下载| www.5644.org-如何举报网络彩票| www.9383.online体育彩票旗舰店技巧| www.40396.com-足球胜负彩预测推荐| www.986275.com-阿里彩票平台投注站| www.sx87.com-福彩地方彩种| www.601940.com-80彩票几年了| www.697575.com-清明节体彩放假吗| www.770975.com-500彩票客服电话| www.11279.cc-福利彩票2368期| www.651632.com-永利彩票直播网| www.066788.com-博友彩app苹果| www.203395.com-福彩排列5开奖结果| www.381242.com-彩芽天然的好奇心| www.412534.com-足彩分析师经验| www.636862.com-传统彩网址-| www.814503.com-吉林快三500| www.0099.me-中彩网能投吗| www.2680.com-牛蛙彩彩票开奖现场| www.038379.com-彩票49倍下载| www.324639.com-幸运时时彩计划网站| www.5509.vip-微信彩虹岛水果攻略| www.71614.com-白菜群彩票吧网址| www.581518.com-凤凰vip快三网址| www.192618.com-快三稳赢技巧| www.397649.com-体彩销售点几点停售| www.404967.com-网上男友叫玩七星彩| www.8986.xyz-彩分怎么兑换彩票| www.545646.com-青岛彩票站转让信息| www.659678.com-彩票预测交流群| www.795707.com-甘肃晋彩快三| www.pq46.com-体彩助手-| www.696.hk-私彩代理如何盈利| www.02323.cc-鴻鼎彩票-| www.58793.cc-内蒙古福彩网下载| www.003064.com-菲律宾彩票招工骗局| www.161584.com-新加坡快三查询| www.237347.com-黑尤冮体彩6十1| www.330557.com-248彩票骗局| www.414197.com-精彩的含义是什么| 中国福利彩票www.33588w.com| www.041218.com-买彩票能中大奖真相| www.130890.com-云购彩票下载安装| www.201456.com-福彩3d惊人的规律| www.062625.com-牛彩3d图谜汇总九| www.580472.com-彩仙阁软件怎么买| www.625260.com-高兴彩票平台官网| www.720338.com-七星彩高频技巧| www.952547.com-好彩先锋最新资料| 500彩票www.303464.com| www.jv87.com-彩铅风景画简单落日| www.n64.biz-广东十分彩走势图| www.47fi.com-体彩店装修风格图片| www.1009.in-高频快开彩票游戏| www.5753.wang-江苏体彩七位数机选| www.706176.com-牛彩网图迷-| www.769836.com-好彩足球彩票| www.832587.com-桃屋猫三国梦想星彩| www.885638.com-新利福彩-| www.938614.com-双赢彩票手机app| www.976831.com-洛阳孟津彩礼是多少| www.jm87.cc-彩票套彩-| www.yq60.com-易旺彩票彩种| www.04is.com-500彩票我的账户| www.563334.com-cc彩8-| www.222344.com-易彩快3骰子规律| www.979893.com-体彩图谜总汇牛材网| www.el32.com-3d红五彩吧图库| www.979062.com-3分彩技巧-| www.db75.com-彩票坐庄一定赢钱吗| www.003140.com-幸运彩玩法-| www.118092.com-福建体育彩票走势| www.190495.com-大发快三今日走势图| www.43864.com-彩乐乐蓝球杀号| www.871150.com-众赢彩票是不是真的| www.164040.com-体彩6+1开奖结果| www.250662.com-共赢团队彩票计划| www.332866.com-新浪足球彩票开奖| www.408432.com-花迷彩妆是几线品牌| www.496644.com-某体育彩票经销售| www.581589.com-彩八仙时时彩ios| www.4317.biz-湖南刘雪龙黑彩视频| www.29466.cc-苹果版彩票app|