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.ws51.com-彩票易网手机版下载| www.942554.com-山东省体彩兑奖中心| www.cp8978.com-老快三爱彩乐| www.3782.cn-足球彩票单场二选一| www.809658.com-f彩网可信吗| www.912146.com-彩53cc-| www.986167.com-百宝世嘉彩票走| www.ja31.com-福彩开奖号码查询| www.695071.com-中国福利彩走势图| www.699607.com-辽宁3d福彩走势图| www.806696.com-刮彩票能不能中| www.927398.com-江苏体彩彩民论坛| 豪彩VIPwww.qin618.com| www.58945.com-六台彩迷宫全部| www.079972.com-不交彩票税的国家| www.168921.com-贵州体彩11选5| www.246608.com-玩大发快三技巧| www.729277.com-pk彩票安卓版| www.810871.com-福利3d彩票藏机图| www.888698.com-福利彩票网络| www.019763.com-体彩加盟电话| www.166353.com-河北快三开奖今天| www.296367.com-彩专家计划-| www.123262.com-福彩3d高手贴吧| www.24491.com-彩铅手绘古风人物| www.a28.net-新浪竞技彩票风暴| www.379510.com-天天益彩官网| www.051356.com-3d福彩字谜画迷| www.96fi.com-易博彩票网站| www.624434.com-好彩店正规吗| www.581187.com-怎么看福彩走势图| www.5dw.cc-广东福利彩票一等奖| www.24or.com-六福彩票下载| www.137971.com-最近彩票新闻| www.943011.com-众彩易购幕后| www.3949.cn-一定牛彩票违法么| www.465.tv-喜欢彩票-| www.1262.in-彩票网11选5| www.d90.club-竞彩足球兑奖时间| www.zp2.com-福建彩民论坛| www.6wh.com-中国竞彩联盟app| www.635.website十二生肖马彩票| www.5354.biz-梦到学生买彩票中奖| www.21433.com-时时彩五星和值走势| www.528019.com-精准彩霸王图| www.759027.com-微彩店官网-| www.881436.com-伟德体彩app| www.983920.com-1980彩票网-| www.605092.com-胜负彩能中奖吗| www.029232.com-七彩网骗局-| www.53gr.com-体彩票彩票开奖查询| www.4211.org-七彩国旅-| www.625680.com-开心时时彩平台| www.9320.loan-吉隆坡快三-| www.365235.com-甘肃省快三形态一| www.32731.com-买快三的网站| www.039761.com-华彩赢家是不是传销| www.222080.com-快乐十分钟彩票| www.006727.com-福彩20算五-| www.037489.com-爱投彩票ios| www.685087.com-彩票3d图纸-| www.710888.com-中国人福彩-| www.272263.com-快三还有什么技巧| www.223357.com-足球彩票胜负彩| www.365330.cc-彩库宝典安装不了| www.497520.com-彩票pk10计划| www.594985.com-京东彩票靠谱吗| www.735023.com-环球彩妆学校| www.833357.com-口袋彩店店铺二维码| www.937312.com-辽宁福彩app| 500彩票网www.65707r.com| www.547536.com-28彩吧-| www.297.cc-网上有人带玩七星彩| www.3976.cn-体彩316前后关系| www.028448.com-四川快乐12爱彩乐| www.127921.com-雨后彩虹图片大全| www.539680.com-饭圈彩虹屁语录大全| www.644421.com-l23彩票网下载| www.703331.com-福彩天地报在线今天| www.778435.com-彩之乐网站-| www.840258.com-皇冠足彩推荐| www.903746.com-体彩p3金码-| www.961415.com-环宇体育直播竞彩猫| 易盈彩票www.7793z.com| www.816918.com-哪些人容易中彩票| www.599448.com-福利彩票佣金谁给| www.986557.com-彩神v111-| www.103064.com-福彩快三过年放假吗| www.196262.com-今日快三推荐号码| www.302823.com-大富彩票app| www.8220.xyz-vip网投彩票| www.sy79.cc-vr十分彩开奖号码| www.031400.com-天天彩票网是否真实| www.579062.com-老虎机彩金可以调吗| www.030818.com-网上玩彩票是真的吗| www.066610.com-怎么看五分彩走势图| www.171322.com-北京体彩11选5| www.59676.com-彩吧开机号查询| www.880453.com-时时彩代理招商平台| www.973034.com-湖北福彩走势图| www.cm52.com-快三助手官方下载| www.sl59.com-万达大玩家彩票兑换| www.50gq.com-怎么举报福彩中心| www.0195.cc-银海布衣彩报图| www.823665.com-木纹彩涂钢板| www.404638.com-彩铅画需要的工具| www.542896.com-彩票网站账户| www.627100.com-乐都彩票传统彩料| www.688193.com-33彩票怎么样| www.768363.com-网上黑彩漏洞| www.842580.com-福彩工作心得体会| www.907798.com-宣城体彩兑奖处| www.968168.cc-彩民高手坛-| www.nk.com-安徽福利快三一定牛| www.866421.com-搜狐彩票靠谱吗| www.948743.com-南宁快三开奖| 易彩集团www.25688f.com| www.227187.com-怀表每天快三秒| www.097372.com-中国福利彩票刮刮卡| www.968113.com-宁夏福彩中心招聘| www.gk00.com-网络一分快三假吗| www.42fp.com-原彩显示耗电吗| www.2954.cc-彩票店装照片| www.35500.cc-苹果99彩票下载| www.81317.com-福彩早早报-| www.370945.com-彩铅画手绘花教程| www.187181.com-时时彩看号规律| www.540590.com-福彩校验码-| www.219654.com-概率购彩-| www.502838.com-爱投彩票和口袋彩店| www.cp1170.com-内蒙快三推荐号码| www.78358.com-家彩网断组-| www.yy35.com-乐盈彩票全天计划| www.36pc.com-七星彩五六位和尾| www.968349.com-胜负彩开奖任九奖金| www.613586.com-2018中奖的彩票| www.544605.com-你好彩票-| www.984364.com-广州鸣彩艺术品骗局| www.jd16.com-足彩竞猜结果| www.nl71.com-足彩胜负开奖| www.636338.com-彩虹糖糖果机| www.278857.com-快三秒热水器水小| www.092661.com-68彩票安卓客户端| www.161.in-抖音昵称加彩虹| www.93711.com-广西福彩七乐彩| www.0842.me-网上不能购足彩| www.691907.com-彩票开奖排列三图迷| www.773914.com-出国做时时彩可靠吗| www.5566.cm-马来西亚分分彩| www.21018.com-大发时时彩爱心彩| www.77374.com-好彩客官网苹果版| www.7175.loan-博彩游戏骗局| www.i28.top-快三一直倍投亏惨了| www.86060.cc-彩钢板厚度国家标准| www.614343.com-彩的组词是什么意思| www.762319.com-博王时时彩计划软件| www.888692.com-双色球机选网易彩票| www.971714.com-河内2分彩-| www.ca91.com-快三门户app下载| www.059801.com-家彩论坛千禧试机号| www.4488.me-最近的彩票站的位置| www.363819.com-快三解锁计划软件| www.712732.com-彩票店最晚几点关门| www.773882.com-360彩票时时彩|