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天

知道了
1分快三 www.072311.com-快频彩票是不是真的| www.126267.com-彩票6十1开奖| www.232510.com-足彩19044-| www.627566.com-彩1平台是黑平台呢| www.18gu.com-辽宁快三链接| www.6595.biz-nba体彩购买技巧| www.01vc.com-ig新传统彩靠谱吗| www.220.hk-好彩双爆珠香烟草莓| www.751178.com-今期四不象彩图| www.618390.com-体彩是公益吗| www.13fz.com-鑫彩鸿装饰-| www.543243.com-福彩三的牛彩图迷| www.20661.com-送彩金的彩票大全| www.12qa.com-800万彩app-| www.211.cm-中国冀彩宝-| www.4290.xyz-福彩乐透乐博彩论坛| www.179860.com-内蒙古快三结果| www.254867.com-十大彩票平台排行榜| www.99961.cc-彩票大家嬴-| www.086013.com-凤凰彩票vlll| www.24441.com-麋鹿彩铅画-| www.96067.com-彩票中二等奖去哪领| www.s96.club-近期中奖彩票图片| www.955566.com-正规的彩票网站排行| www.310884.com-红旗彩票推荐软件| www.cp373.com-快三平台靠什么赚钱| www.009415.com-999彩票软件| www.594985.com-京东彩票靠谱吗| www.64ab.com-彩票终端机入围厂家| www.032325.com-怎么查询彩票真假| www.122535.com-酷彩官网-| www.1269.top-福建省福利彩票中心| www.820959.com-山东彩钢市场| www.911530.com-湖北省快三遗漏| www.979019.com-福彩快3投注速查表| www.ah95.com-七星彩合值走势| www.335576.com-湖北快三怎么预测的| www.590418.com-中国竞彩交易量| www.7361.biz-宜州足彩店电话| www.376771.com-关注彩票-| www.005760.com-时时彩全套源码| www.571498.com-重庆时彩牛牛赔率| www.686436.com-高频彩自动投注软件| www.796419.com-亚洲购彩网能提现吗| www.881985.com-01彩票违法| www.964802.com-体彩大乐透预测杀号| 百姓彩票www.bxcp66.com| www.mb91.com-糖果彩-| www.438389.com-南京时时彩诈骗案例| www.542338.com-什么博彩平台信誉好| www.639413.com-为什么买竞彩总是输| www.711992.com-离婚彩礼钱怎么办| www.780893.com-88彩票快3专家| www.850128.com-竞彩足球比分推荐| www.907006.com-非法经营彩票判决书| www.974210.com-好运来彩票网骗局| www.cai52.cc-快三走势图怎么判断| www.lg84.com-红彩网安卓-| www.336046.com-广西福利彩快乐十分| 大赢家彩票平台www.591017.com| www.763086.com-四亿彩赠送41| www.871716.com-苏州市福彩兑奖地址| www.954213.com-时时彩ios软件| 500彩票网www.607993.com| www.7572.pw-东方秒秒彩平台| www.39819.cc-速赢彩软件下载| www.96702.com-博纳彩票是骗子吗| www.533370.com-体育彩票365安卓| www.660150.com-足彩推荐预测app| www.752953.com-买彩票输了8万| www.376338.com-安徽体彩大奖| www.585586.com-澳客彩双色-| www.661212.com-得彩群的骗术| www.447401.com-众彩网靠谱吗| www.xz67.com-韩国彩票怎么兑奖| www.020435.com-o38彩票app-| www.kx99.cc-内蒙快三开奖预测| www.cai8777.com彩票十选五怎么玩法| www.ue79.com-凤凰彩票属于私彩| www.20il.com-九彩僵神秦无风| www.1608.wang-哪里的彩票合买系统| www.rq53.com-一分快三有啥平台| www.28qv.com-128福彩下载安装| www.92gh.com-87彩票怎么下载| www.749479.com-旺彩大乐透开奖号码| www.173940.com-大发时彩主页| www.569365.cc-时时采彩开奖查询| www.561080.com-久游彩票平台半厘| www.345477.com-体彩排列3字谜论坛| www.29pw.com-今日体彩排3推荐胆| www.904630.com-买彩网金手指日报| www.28268.cc-体彩亿元大奖| www.119541.com-福彩3d准香港漫画| www.252774.com-重庆老时时彩360| www.360461.com-富豪87彩票店| www.vu44.com-彩票k线-| www.93lf.com-下载f彩网-| www.24253.cc-宝马彩票违法么| www.761827.com-在线福彩是合法的| www.959391.com-五分时时彩人工计划| www.go31.com-河南订婚可以退彩礼| www.72rs.com-约彩365苹果版| www.393996.com-福利彩开奖结果昨天| www.532702.com-365天天彩票官网| www.661685.com-足彩买8串8-| www.611553.com-长春溢彩关门了吗| www.603215.com-中国足球竞彩比分直| www.092239.com-吉林快三多长时间| www.411088.com-3d唯彩看球预测| www.641611.com-流动体育彩票车| www.37633.cc-7星彩基本走势图| www.498324.com-日立彩票怎么注册| www.680685.com-宁夏体彩票十一选五| www.03233.com-爱中彩票官方开奖| www.835113.com-好彩绿好抽吗| www.086619.com-自助彩票机代理| www.282549.com-重庆时时彩稳定盈利| www.410951.com-双色球彩妹杀号公式| 福彩www.26878k.com| www.938552.com-快三推荐湖北| www.976225.com-彩礼4万8寓意| www.63aq.com-3的新彩网-| www.206099.com-五分彩公式-| www.166568.com-快三彩票app| www.623453.com-彩6最新版本下载| www.537745.com-彩是表示颜色的字吗| www.264262.com-哪个彩票中奖概率高| www.418892.com-体彩排三百度贴吧| www.815896.com-体彩专家预测分析网| www.664382.com-七乐彩500期| www.099817.com-78彩店app-| www.76xf.com-彩票投注计算| www.617251.com-扬州彩票投注站| www.654820.com-旺角彩皇免费资料| www.128506.com-广西快三和值预测| www.256345.com-《中彩彩票》安全吗| www.897035.com-快乐彩票三是什么| www.fv08.com-体彩五d-| www.02895.com-亚彩会注册平台| www.007422.com-k彩官网-| www.893300.com-彩票大师app| www.aq03.com-遵义彩票店几点开门| www.49al.com-天天赢彩票链接| www.97ar.com-彩票之神-| www.ak10.com-网上彩票骗局揭秘| www.0yy.com-手机淘宝从哪买彩票| www.021477.com-拉菲2彩票代理| www.591247.com-竞彩保本打法| www.mq25.com-彩票店主吃票| www.653832.com-足彩今日强胆| www.549527.com-网易彩票旧版首页| www.6ee.com-万森彩票平台怎么样| www.034123.com-中国体育彩票nba| www.925192.com-财神彩票平台| www.471477.com-竞彩管方欧赔| www.587185.com-湖北快三机选| www.660887.com-竞彩肥罗-| www.773475.com-彩票托是什么| www.838368.com-彩24app-| www.907082.com-做梦梦到数字买彩票| www.983226.com-盈彩吧安全吗| www.rr26.com-彩钢单板围挡| www.5ld.com-1800彩票平台| www.199356.com-体育彩票5d-|