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.34085.com-无极源码福利彩票| www.778418.com-海南七星彩规律| www.618293.com-体彩的公益活动| www.k44.com-国家合法的彩票| www.295722.com-体彩3d开奖号码| www.711641.com-竞彩足球让球负什| www.444902.com-ai足彩软件-| www.608933.com-彩走势图牌走势图| www.776056.com-时时彩龙虎玩法介绍| www.512175.com-柬埔寨30秒彩| www.761881.com-足彩竞彩购彩app| www.948692.com-彩票资金分配| www.077049.com-诚信彩app-| www.503232.com-湖北体彩网开奖查询| www.601180.com-购彩网邀请码| www.687107.com-振幅彩票术语| www.13805.cc-七乐彩彩经网走势图| www.88692.com-哪里可以买竞彩| www.417355.com-盛大彩票75355| www.805011.com-中超联赛竞彩| www.917365.com-重庆福利彩票中汽车| 幸运彩票www.216299.com| www.682684.cc-网络彩票2019| www.765828.com-和值跨度快三| www.846856.com-竞彩足球绝密盘判断| www.930213.com-各类彩票一等奖金额| www.993068.com-彩票一个数字怎么选| www.de81.com-福彩彩票开奖结果| www.vk97.com-福彩调整公告| www.8806.top-分分彩技巧压龙虎| www.873914.com-福彩3d精华布衣4| www.032660.com-七星彩机选一注| www.651837.com-728彩票注册| www.7890.cc-四川省中国体育彩票| www.078086.com-快三单双赌博技巧| www.221882.com-揭秘高频彩-| www.664341.com-中国彩票一更懂彩民| www.831284.com-彩票主任事件| www.940552.com-金福彩票网站登录| www.cp6698.com-广西快三遗漏值表| www.44hv.com-官方时彩-| www.6825.pw-四季彩日本-| www.318718.com-福彩跟体彩下载| www.278537.com-预测快三-| www.37721.cc-彩虫7下载安装| www.248648.com-澳门彩票公司手机版| www.939127.com-699彩票平台官网| www.102624.com-k彩网站-| www.042852.com-甘肃快三微信交流群| www.751888.cc-扬州体彩兑奖| www.982249.com-人人快三投注技巧| www.053238.com-快三单双对赌套利| www.845206.com-彩票手机做号软件| www.912401.com-11选5私彩害人| www.22lt.com-快三赢钱技巧| www.551912.com-福利彩票长龙| www.153346.com-中国福利彩票生肖| www.515920.com-竞彩足球提成| www.635751.com-彩虹六号哪个版本好| www.14524.com-辽宁全运彩开奖| www.6662.cc-帝王彩平台-| www.852810.com-大同彩票平台登录| www.959477.com-佳缘女孩带我玩彩票| 500彩票www.934277.com| www.447999.com-新澳洲3分彩计划| www.795883.com-7k购彩网址-| www.651313.com-世界水彩人物| www.wy92.com-福彩快3安全吗| www.761463.com-好彩妹是哪部剧| www.862385.com-七乐彩预测专家分析| www.964181.com-15选5预测彩乐乐| www.6728.in-唯博福彩-| www.87075.com-彩民争霸下载| www.194655.com-腾讯分分彩计划| www.949016.com-中彩福骗局-| www.jw29.com-彩库宝典app| www.179639.com-湖北快三开奖及走势| www.960342.com-好运彩彩票网可信吗| 彩乐坊www.541611.com| www.145539.com-足球310竞彩推荐| www.cai0111.com北京快三一定牛| www.io23.com-足彩预测网-| 彩票5www.550304.com| www.89574.com-577彩票平台苹果| www.224022.com-幸运快三倍投计划表| www.668801.com-华人彩票的客服| www.762188.com-竞彩足球app安卓| www.95978.cc-体彩中心待遇好吗| www.080853.com-在百度下载彩票| www.230797.com-彩运网骗局-| www.324726.com-体彩排列三图库| www.7497.top-体彩小终端深圳| www.577003.com-玩彩神8输了三十万| www.011033.com-易迅彩票怎么没有了| www.605555.com-彩晶膜厂-| www.368669.com-福彩3d太湖猜字谜| www.3439.cm-网易红彩专家预测| www.9900.pro-乐游彩票网站是多少| www.um54.com-3d彩宝网金胆| www.37do.com-什么是uk彩安全吗| www.52048.com-中大奖的彩票网登录| www.024617.com-彩神通有手机版的吗| www.96601.com-37彩票是真的吗| www.318047.com-幸运彩票成立多久了| www.531206.com-制作彩票软件下载| www.248547.com-3d彩报吧-| www.et21.com-信誉高的彩票网站| www.f30.me-马来西亚彩票诈骗| www.48xt.com-九万彩票充值没到账| www.397632.com-家彩网三地杀号| www.859803.com-彩票app快三| www.653428.com-福彩三地精准开机号| www.833106.com-qqcp彩票-| www.957551.com-北京体彩兑奖地址| www.hw37.com-北京快三网站平台| www.59pb.com-福i利彩票走势图| www.9394.org-彩票年底啥时候停售| www.87351.com-933彩票版-| www.ux99.com-江苏快三助手走势图| www.51779.cc-牛彩平台新登录地址| www.8215.xyz-基诺快乐彩-| www.251563.com-中彩网是国家的吗| www.119446.com-体彩六码遗漏统计| www.185869.com-快三经验-| www.528161.com-快三导师带计划| www.610283.com-如何网上开彩票店| www.58js.cc-福彩3d黑白玄机图| www.093110.com-重庆全天时时彩计划| www.226344.com-娱乐快三开奖| www.367585.com-上上期彩票中奖号码| 500彩票www.50024a.com| www.658590.com-范伟买彩票中的号码| www.749225.com-下载娱乐彩票| www.829222.com-x彩票-| www.900076.cc-51网上彩票-| www.973098.com-七彩玫瑰永生花| www.cp7026.com-彩票坊江苏快三被骗| www.008453.com-胜负彩19053| www.490588.cc-七星彩杀号定胆法| www.88730.com-广西双彩综合走势图| www.924034.com-彩票概念股龙头| www.423911.com-乐彩33首页-| www.48ym.com-北京七彩祥云| www.44818.com-彩票负盈利什么| www.953493.com-马来西亚彩票| www.6797.biz-彩票福彩15选5| www.301307.com-微彩排列-| www.447283.com-360彩票对比| www.240518.com-新3d彩票分析软件| www.243550.com-彩票数字3单式开奖| www.355140.com-彩票中二等奖概率| www.999007.com-天津爱乐彩快乐十分| www.lk26.com-兴盈快三犯法吗| 网易彩票www.064wy.com| www.214142.com-全球盛兴彩票登录网| www.91508.com-联盟黄金炫彩| www.441130.com-彩票开奖查淘| www.870679.com-118彩票投注平台| www.933.me-彩吧彩报图迷第三版| www.539174.com-90足彩比分-| www.638678.com-上海体育彩票店| www.713403.com-中彩票大奖-| www.244012.com-山东彩票开奖结果| www.334048.com-黑彩平台境外服务器|