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.mx25.com-福彩快三一天多少期| www.su92.com-体彩7星彩开奖时间| www.16uo.com-湖南快三开奖| www.506286.com-体育彩票一周开几次| www.430338.com-淮安彩礼2018| www.48ic.com-中国福彩图标| www.95436.com-体彩活动-| www.117735.com-七星彩周公解梦数字| www.810122.com-56240彩票-| www.918270.com-海南七星彩玩法介绍| www.983499.com-上海福彩选四走势图| www.dt68.cc-神彩福牛app| www.co36.com-彩客网提款提不出| www.618884.com-东北福彩论坛| www.1384.xyz-看彩票app-| www.779899.com-开彩票站的最佳地址| www.868244.com-uk彩骗局-| www.965131.com-玩彩票为什么老是输| www.cai1998.com江苏快三形态走势图| www.ke37.com-体彩算赌博吗| www.f79.cn-马来西亚博彩合法吗| www.36ip.com-七星彩试机号查询| www.124416.com-有没有买彩票中奖的| www.10ou.com-关于彩票真假视频| www.586476.com-下载南方福彩| www.623373.com-鸿彩网手机-| www.717365.com-经典快三靠谱吗| www.345937.com-云购彩票最新邀请码| www.008783.com-彩票源码下期开奖| www.105038.com-709彩票平台安卓| www.874855.com-拉菲装饰彩票| www.966955.com-手机投注彩票可信吗| www.kt6.cc-快三砍龙口诀| www.yv34.com-山东体彩兑奖流程| www.78oc.com-彩票七天乐官网| www.0626.org-武汉福彩机转让| www.178395.com-快乐彩开奖结果今天| www.303753.com-双彩网真实的谎言| www.645274.com-明版彩票历史开奖| www.284466.com-南昌快三开奖号码| www.365748.cc-看福彩开奖结结果| www.465561.com-国民彩票安全吗| www.10mt.com-汪汪时时彩app| www.017046.com-快三老板走势图| www.923526.com-亿彩彩下载-| www.88pk.com-彩票粉丝哪里可以加| www.345147.com-彩票中奖在哪里兑换| www.479303.com-赢彩网怎么样| www.172424.com-福彩快三骗局揭秘| www.323004.com-牛彩藏机图谜汇总| www.505404.com-彩票平台登陆| www.240247.com-神彩8争霸-| www.882310.com-竞彩计划表-| www.161270.com-中国体育彩票网点| www.61728.com-领航彩票计划手机版| www.818770.com-当彩票打票员视频| www.931418.com-高压吉林快三走势| 同乐彩票www.029783.com| www.1089.live-邯郸体彩站转让信息| www.226599.com-中国的彩票种类玩法| www.cp0186.com-快三助手官方| www.8237.org-t27cc开奖彩票| www.003815.com-彩之源是正规平台吗| www.6556.cn-鑫彩晨公司怎么样| www.856239.com-极速时时彩平台出租| www.951454.com-优信彩票怎么样| 幸运彩票www.927699.com| www.191713.com-下载快三开奖结果| www.30dv.com-彩虹世界百度云资源| www.964465.com-ok足球竞彩日| www.gj52.com-广西福彩快三遗漏| www.09096.com-广东彩票这个软件| www.36052.com-万博彩票apρ| www.194062.com-官方极速快三彩票| www.9697.in-体彩金七宝下载安装| www.812932.com-华彩人生-| www.13112.cc-最新奥盘足彩| www.627094.com-爱彩乐智能荐号| www.360965.com-开彩墨子智能是传销| www.201482.com-星彩三邪恶-| www.863926.com-159彩票官网| www.934051.com-彩70网站-| www.982771.com-彩票365天-| www.rn3.com-湖北省快三走势图| www.0290.org-彩票出8个号是什么| www.531159.com-彩铅手绘-| www.890073.com-花生彩票有没有备案| www.968582.com-易彩堂官方下载| 99彩票www.655902.com| www.51596.com-时时彩k线图手机版| www.984195.com-福彩3d最新太湖字| www.gp99.cc-好彩票-| www.608999.com-哪里能买时时彩龙虎| www.093377.com-在线彩票app| www.35nt.com-速8彩票是不是合法| www.304178.com-甘肃快三走势图下载| www.64wz.com-湖北体彩开奖结果| www.8765.site-乐彩沦坛-| www.052285.com-鸿运来彩票网| www.199455.com-福彩61开奖结果| www.hp79.com-竞彩足球北单| www.yj64.com-c彩38-| www.15ze.com-彩票中心领奖流程| www.488967.com-彩票网站套利| www.cp9518.com-中彩网是合法的吗| www.08207.com-长沙体彩兑奖地址| www.027178.com-1寸彩色相片图片| www.61087.com-第一彩票网站首页| www.871690.com-最近的福彩投注站| www.7473.xyz-开体育彩票店怎么开| www.839336.com-求加入福彩快三| www.759399.com-彩票平台源码哪个好| www.380063.com-七乐彩31期奖号| www.553875.com-98熊猫彩银-| www.688514.com-彩票站卖黑彩判刑吗| www.76ml.com-猜彩票数字-| www.132117.com-上海彩妆店-| www.y47.com-天天福彩app下载| www.702389.com-靠谱的网彩-| www.750713.com-彩票查询开奖3d| www.828159.com-彩民彩票提现| www.887002.com-全民彩票靠谱吗| www.949476.com-快乐彩害人不浅| www.989794.com-中港彩票官方平台| www.cf2.com-体彩26选5-| www.973899.com-幸运五星彩开奖视频| www.725990.com-博友彩安全吗| www.800489.com-体育彩票3d试机号| www.869050.com-七星彩9的对数是几| www.942338.com-福彩双色球历史数据| www.995465.com-足彩冷热表-| www.50rz.com-福利彩票什么时间开| www.251169.com-今日中彩能中奖吗| www.2478.pw-彩票网售最新消息| www.296595.com-安徽十一选五彩票| www.1966.pro-下载王牌彩票| www.fh81.com-高德彩诈骗-| www.533132.com-福彩3d技巧教程| www.654930.com-买足彩外围是否合法| www.739421.com-彩票之家999| www.822820.com-彩铝板彩钢板| www.902806.com-找彩票平台做代理| www.966506.com-彩票什么种型| 500彩票www.330872.com| www.k14.bid-山西省体彩领奖地址| www.0420.me-今天精彩音乐汇歌曲| www.7383.vip-体彩竞彩几踢完| www.24478.com-彩色铅笔画樱桃| www.sw20.com-临沂彩票老师| www.8rd.com-博仲彩票下载| www.52ly.com-永利彩票网址| www.917056.com-彩铅画图片卡通人物| www.30ez.com-手机购彩哪个网站好| www.713916.com-彩神争8网页手| www.801550.com-福彩3d字谜多彩网| www.877092.com-福星图库台湾福星彩| www.933304.com-福彩双色球机选号码| 鸿运彩票www.hy2733.com| www.89396.com-赢彩门户185开奖| www.74ql.com-大掌柜彩票平台网站| www.2545.xyz-信用卡积分兑彩票| www.842757.com-中央彩票公益金官网| www.922935.com-福彩3d天牛图库j| www.972275.com-福彩3d魔图高清|