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.18sa.com-聚亿购彩时时彩| www.711166.com-赌彩让我翻了身| www.003681.com-盈彩网计划-| www.037113.com-彩票缩水软件怎么用| www.160073.com-彩99app安卓版| www.xa26.com-贵州省快三开奖结果| www.51058.com-乐彩围蓝-| www.786319.com-体彩大赢家下载| www.883453.com-彩票计划软件开发| www.962748.com-五分彩app计划| 购彩堂www.120057.com| www.739092.com-我要福利彩票3d的| www.875114.com-酷彩吧app安卓| www.m96.org-22彩票是黑平台吗| www.5244.com-彩票派彩什么意思| www.257955.com-爱彩票破解-| www.332078.com-6s手机彩膜-| www.2491.vip-时时彩网彩计划| www.784209.com-038彩票网合法吗| www.608098.com-韩国快三到几点| www.11352.com-彩票中心电话| www.zm94.com-辽宁唯博彩票信息| www.7161.pw-腾讯五分彩看号技巧| www.9052.biz-牛爹七星彩头尾资料| www.090510.com-彩票对打平台赚佣金| www.473908.com-极速快三害死人| www.005347.com-彩票砍龙概率| www.9011.in-体彩综合版-| www.68804.com-尊彩平台是不是真的| www.044227.com-今日3福彩-| www.975575.com-涂磊说彩礼该不该给| www.522182.com-腾讯5分彩下载安装| www.606777.cc-购买世界杯足彩| www.680331.com-体彩礼拜几开奖| www.781347.com-微彩吧网-| www.993986.cc-彩票游戏怎么玩| www.91232.com-好彩柠檬爆珠图片| www.9361.biz-永和彩票app| www.290004.com-内蒙古福彩快时时彩| www.400396.com-福彩快三套路教学| www.522527.cc-新世纪分分彩| www.616166.com-609彩票网-| www.699080.com-唐启伟福彩主任| www.778784.com-9万彩票登录| www.906318.com-黑彩平台如何拉人| www.976772.com-彩礼钱爸妈不给女儿| www.cp2668.com-福彩快三口诀表| www.7555.live-大通彩票有没有作假| www.8756.loan-顺盈彩票靠谱吗| www.85258.com-排列三开机号利彩网| www.763833.com-足彩下载什么软件| www.35685.cc-福彩3d豹子列表| www.496033.com-彩娱乐官方平台| www.595677.com-分分时时彩官网| www.w50.online-彩之道福彩3d| www.11300.cc-烟台福利彩票站地址| www.951457.com-500彩票真的吗| 大赢家彩票网www.339713.com| www.cai730.com-江苏快三是什么东西| www.ld59.com-中彩彩票可靠吗| www.c88.cm-百宝彩走势图下载| www.29gd.com-手机可以买足彩吗| www.145.biz-日出彩虹图片大全| www.3717.cc-体彩排列五字谜| www.500069.cc-彩票中的数字规律| www.563714.com-青海彩票网-| www.11683.com-泰国彩票查询| www.529613.com-直播刮彩票违法么| www.29123.com-今天五星彩开奖结| www.325354.com-狂想彩票系列谜语| www.739712.com-e77乐彩线路检测| www.824755.com-网络快三是网赌吗| www.144487.com-竞彩外围网站app| www.4689.top-彩票可以提前买几期| www.056901.com-七星彩彩票分析预测| www.339492.com-速盈彩票是不是真的| www.033116.com-中信积分换彩票| www.159601.com-中彩网网址登录| www.805859.com-福彩刮刮乐过期| www.904449.com-足彩进球彩-| www.7071.net-腾讯五分彩开奖结果| www.868808.com-七星彩前4个规律| www.988714.com-全民中彩票网址多少| www.gx40.com-福彩3d百科-| www.32kl.com-80彩票app骗局| www.588408.com-全民买彩票下载| www.72878.cc-3d开机号彩经网| www.354188.com-彩票买多肯定概率高| www.480202.com-澳门快三分析软件| www.5252.website福彩牛材网3d图谜| www.17797.cc-体育竞彩推荐app| www.765144.com-海口网七星彩彩版| www.54kj.com-开彩开彩-| www.578879.com-山东体彩开奖详情| www.968689.com-香港买的彩金值钱吗| www.085357.com-红包彩票主播| www.02662.com-百乐门彩票能挣钱吗| www.006245.com-南京娱乐快三查询| www.155120.com-足球彩票胜负预测| www.251109.com-9a彩票-| www.980572.com-成功彩票是黑平台吗| www.ev87.com-乐彩网论坛-| www.58dq.com-掌握彩票规律| www.lb93.com-天天中彩票官网| www.098587.com-双彩网手机版| www.343201.com-彩神网火爆4肖| www.602836.com-彩44是黑平台吗| www.1136.net-玖富彩票-| www.133579.com-500w彩票网网址| www.366749.com-海口福彩中心| www.500766.cc-第一台彩色摄影机| www.670598.com-七星彩开奖号码24| www.18wm.com-亿彩天虹软件下载| www.926757.com-达人彩票靠谱吗| www.mb29.com-百度快三和值跨度表| www.19rr.com-精彩点击-| www.25318.com-画彩铅的技巧| www.140303.com-久久彩票进不去| www.3963.xyz-彩809注册页| www.638756.com-上海体彩店怎么开| www.755232.com-韩国彩票规则介绍| www.66wt.cc-黑龙江福彩麻将玩法| www.658078.com-百宝彩河北十一选五| www.709051.com-七天彩票是真的假的| www.x88.loan-体育彩票手游| www.0631.cc-爱彩票手机版下载| www.96xa.com-重庆时时彩全天计划| www.390913.com-台州福彩官网| www.503058.com-彩友多最新版| www.965745.com-彩神app网站登录| 幸运彩票www.luck887.com| www.mf32.com-1分快三下载地址| www.32577.cc-春秋彩票平台| www.152727.com-cc彩票网-| www.221030.com-彩神网站app下载| www.421774.com-网上玩快三犯法不| www.545350.com-快三技巧规律视频| www.zc49.com-玩福彩三第输死了| www.533169.com-一分极速澳门彩票| www.98696.com-竞彩4×5-| www.3210.net-凤凰快三内部| www.140289.com-临沂福彩中心在哪里| www.277069.com-湖北快三智能推荐号| www.4433.cm-中华彩票网开奖公告| www.232864.com-新浪足球彩票彩| www.125689.com-厦门体彩店申请| www.032082.com-106彩票官网下载| www.327143.com-鸿瑞彩票合买是托吗| www.611118.cc-一分快三倍投方案| www.567168.com-速赢彩票是不是真的| www.71mn.com-坚持买彩票的语句| www.24vt.com-华彩益彰什么意思| www.4944.vip-迷彩兔手机视频| www.72710.com-福利福彩双色球| www.618690.com-人人赢彩票下载安装| www.739955.com-新彩彩票网址| www.sq62.com-彩民之家-| www.96684.com-博纳彩票官网| www.057339.com-彩票中奖交税规则| www.26734.com-福彩3d对子组合| 500彩票www.338063.com| www.036855.com-推荐合法彩票软件| www.119803.com-彩经彩票手机下载| www.189715.com-河南快三电视走势图|