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.051342.com-首页高频彩吧| www.373518.com-九州信誉彩票网| www.519293.com-开机号近十期家彩网| www.608323.com-体彩加盟费多少钱| www.693727.com-合发彩票真的假的| www.786730.com-彩票中奖装逼生成器| www.872231.com-中港澳彩票-| www.987267.com-全球彩官网下载地址| www.jw0.com-快三二同号技巧| www.sm43.com-中国竟彩网首页| www.22vv.com-166彩票安卓版| www.833.date-彩票是录播的么| www.5859.win-彩票中了丢了怎么办| www.18933.cc-福利彩票3d软件| www.68021.com-微信彩票代玩平台| www.077035.com-彩票十二生肖| www.151870.com-福彩3d怎么买1d| www.268213.com-随州论坛湖北快三| www.366722.com-彩铅手绘入门基本画| www.480025.com-够力七星彩奘表| www.569537.cc-今日福彩3d寻马图| www.663069.com-高频彩信誉排行榜| www.753007.com-哪些彩票是正规的| www.887387.com-招彩网-| www.970315.com-今晚七彩结果| www.cs53.com-上海体彩11选五开| www.wm78.com-掌上七天彩app| www.23go.com-帝豪彩票负盈利| www.0944.win-快乐彩五行概率| www.8044.com-超级简单水彩风景| www.32822.cc-微彩娱乐平台| www.80820.cc-长春彩票打票员| www.038208.com-财神8彩票-| www.164264.com-nba体彩赔率| www.258635.com-中国足球彩票| www.339743.com-好运彩票小助手官网| www.431008.com-足彩竞彩总进球| www.534258.com-七乐彩网上能购买吗| www.659483.com-快三猜测-| www.755426.com-够力七星彩解梦下载| www.852396.com-哪个软件可以打彩票| www.926098.com-梦想彩票下载安装| www.984968.com-竞彩外围网站app| www.cp8538.com-甘肃快三开奖结果| www.ol78.com-中彩网七乐彩走势图| www.03ma.com-江苏快三还有加奖么| www.79qq.com-福彩3d精英论坛| www.2032.mobi-河南众彩网481| www.8033.cm-十字彩什么意思| www.30174.com-重庆大快三下载安装| www.77876.com-彩票被店主冒领| www.032784.com-互联网彩票2018| www.115925.com-福彩大家乐规则| www.191281.com-安徽快三是不是假的| www.270074.com-1彩下载-| www.484281.com-福彩3d金胆传奇| www.566835.com-河南体彩中心在哪里| www.641033.com-天空彩票金彩网| www.757093.com-网易我要中彩| www.836625.com-快三开奖今天结果| www.900072.com-51彩虹聊天软件| www.970164.com-福星彩资料开奖| www.pe95.com-一分钟快三开奖官网| www.3fm.com-七星彩守号技巧| www.62jo.com-福彩三地天中图库| www.0656.org-福彩门头设计图| www.8816.me-彩票白菜贴吧| www.43100.com-福彩双色球预测大师| www.90543.com-赢彩资讯下载app| www.051915.com-万豪彩票助手老版本| www.158095.com-胜负彩19046| www.246722.com-山东快三走势| www.320920.com-台湾福彩星奖直播| www.397333.com-彩票中奖视频新闻| www.545666.com-巨人彩票下载安装| www.632257.com-时时彩害人的东西| www.703411.com-台湾五分彩是骗局吗| www.782616.com-快三秒胶水百科| www.862179.com-甘肃体彩中心地址| www.929211.com-玩彩网官方网站| www.984091.com-彩之源app-| www.jq62.com-吉林快三是赌博| www.e01.in-彩票查询p62| www.33sb.com-19017期七星彩| www.0121.cn-黑色属于彩色吗| www.6840.in-55215彩吧图| www.19745.com-嘉兴福利彩票店位置| www.62861.cc-江苏快三导师计划网| www.038967.com-中国福利彩票交流群| www.125015.com-中国福彩中心主任| www.198361.com-河南体彩网-| www.268092.com-体彩网页版-| www.371355.com-网上购彩软件那个好| www.466671.com-七乐彩历史的今天| www.555295.com-万豪国际博彩邀请码| www.621940.com-看彩票-| www.690309.com-7乐彩开奖号| www.766208.com-投彩网彩票投注站| www.900679.com-福彩3d正版布衣图| www.965394.com-大发快三输钱| 500彩票www.348477.com| www.gz33.cc-518彩票app-| www.xj18.com-好彩客1.1老版本| www.14rz.com-福彩3d焰午字迷| www.609.cc-微信群赌博时时彩| www.4232.xyz-今日说法失控的黑彩| www.9433.com-华人彩8800彩票| www.59672.com-湖北精彩十分5d| www.017165.com-网上彩票店怎么开| www.083861.com-最新电子彩票指南报| www.145599.com-今天足彩专家推荐| www.253229.com-时时彩全天计划胆码| www.321656.com-106官网彩票苹果| www.387245.com-北京时时彩彩开奖| www.525917.com-彩票上税百分之多少| www.606250.com-166足彩停售| www.672092.com-彩票机转让协议| www.742411.com-彩票86app-| www.809655.com-多彩网官方网站| www.877468.com-乐彩神官网-| www.988789.com-正规彩票有哪些| www.cp475.com-彩票快三怎么玩稳赚| www.ks22.com-中国上海福利快三| www.a79.org-创意水彩画作品欣赏| www.25yy.com-武警迷彩图片| www.3685.in-竞彩权威推荐| www.8696.org-全民足彩彩票官方网| www.44435.cc-信誉彩app-| www.84963.com-3d彩圣-| www.029568.com-七星彩机选很难中奖| www.100271.com-禁止网络销售彩票| www.158920.com-机选七乐彩-| www.279450.com-时时彩官网啥时候停| www.361106.com-滴滴彩-| www.440210.com-彩票能用概率学算吗| www.524813.com-凯利公式与高频彩票| www.627609.com-七彩网络红人| www.692009.com-优彩网彩票会员登录| www.761712.com-彩站之家-| www.869207.com-巨丰彩票网-| www.932845.com-正规买快三的软件| www.981981.cc-彩票软件app| www.cq42.com-彩客网是正规平台吗| www.sg89.cc-预测时时彩-| www.02sc.com-带彩虹的男生头像| www.63vx.com-excel彩票-| www.941.me-彩吧首页首页| www.4365.wang-男子赊账买彩票| www.8991.in-凤凰彩票网怎么登录| www.63691.cc-七星彩专家-| www.015424.com-乐佳商城彩票合法吗| www.075979.com-达人彩票邀请码| www.131564.com-长春市福利彩票领奖| www.196384.com-湖北百宝彩票网| www.257691.com-中彩彩票怎注册| www.320429.com-百宝彩票官网下载| www.380290.com-七乐彩012-| www.554264.com-公益体彩宣传语| www.611080.com-彩38c38net-| www.671625.com-做梦梦到彩票中奖| www.734308.com-足彩19051媒体| www.796722.com-彩票随机多少注科学| www.861587.com-体彩开奖助手| www.913239.com-彩客彩票不能买|