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天

知道了
9彩注册 www.nb94.com-中彩彩票怎注册| www.79352.com-七星彩资料大全网址| www.071057.com-彩票店怎么转让| www.46900.com-代理找私彩平台| www.338485.com-彩票跟注平台| www.635108.com-七彩影城爱建店| www.720373.com-七星彩单双技巧| www.954494.com-彩宝彩票官方网址| www.lo7.com-如何看彩票走势图| www.zv67.com-彩35彩票平台| www.4998.xyz-孕妇梦到买彩票中奖| www.29376.cc-福彩3d奖金-| www.290698.com-七星彩神算子彩图| www.087.cm-利彩公司-| www.jv12.com-彩票是不是正规的| www.95606.com-体彩公益金贡献| www.42ln.com-开彩票店利润多少| www.11358.com-江苏快三开奖新浪| www.615898.com-吉林快三定胆| www.944429.com-乐发彩票app| 购彩在线www.66332l.com| www.271279.com-好彩3每期奖金| www.360514.com-体彩任五中奖规则| www.04qw.com-世家子福利彩票| www.0013.online生肖彩票怎么下软件| www.309707.com-福彩快三跨度走势| www.260197.com-内蒙古快三推荐预测| www.648857.com-种彩课文-| www.31895.com-唯彩看球老版下载| www.687515.com-下载全国彩票| www.782237.com-中福彩app-| www.884581.com-福彩山地综合走势图| www.970120.com-乐彩网论坛静态板| www.67qc.com-体育彩票销售额| www.647744.com-0736好彩运-| www.661.gg-北京时时彩五分彩| www.523208.com-代打彩票游戏规则| www.31nm.com-彩虹下面歌词| www.590682.com-幸运彩开元棋牌| www.781377.com-幸运快三qq群骗局| www.198731.com-福彩10选5官网| www.222534.com-注册就送彩-| www.334777.com-体彩快3奖金| www.223124.com-足球彩票500万| www.326711.com-古建彩绘图案| www.897886.com-中超足球彩票在哪买| www.086.hk-广州利彩静电分选机| www.305676.com-吉林快三二同号预测| www.263205.com-重庆时时彩开奖视频| www.437300.cc-巴西安伯快三开奖| www.506.cn-台湾福星彩当期资料| www.625976.com-北京诚通中彩公司| www.727018.com-乐彩网彩票-| www.636816.com-重庆时时彩冷号| www.079.biz-大发快三计划熊掌号| www.6659.cm-双色球乐彩字谜图谜| www.28926.com-时时彩是人为控制和| www.209347.com-快三平台快三揭秘| www.964020.com-福彩3d跨度照表| www.0436.bid-500竞彩完场比分| www.871624.com-利彩彩票下载| www.949524.com-福彩777-| 网易彩票www.095wy.com| www.bg53.com-易彩兼职是不是骗局| www.rc40.com-香港体彩走势图| www.177720.com-青海快三开奖| www.283663.com-下载够力七星彩| www.359261.com-微博彩票在哪| www.434434.com-彩39网站靠谱吗| www.520031.com-哪种彩票能中五百万| www.580211.com-彩票老司机靠谱吗| www.641253.cc-体彩图纸今天| www.9236.org-彩吧3试机号查询| www.029946.com-好运来大发时时彩| www.156399.com-400好彩堂一肖| www.256379.com-我要中彩票官网| www.339503.com-福彩神彩通关注码| www.447397.com-体彩购彩客户端下载| www.560362.com-博彩游戏注册送彩金| www.650925.com-水彩画鹤-| www.746634.com-全球彩安卓| www.846900.com-如何买外围足彩| www.936085.com-吉林快三三同号预测| 500彩票网www.61655q.com| www.73122.cc-中国彩票奖金排名| www.366158.com-浙江福彩双色球玩法| www.484803.cc-快乐五分是什么彩种| www.573189.com-腾讯分分彩分析系统| www.651503.com-彩票最好的软件| www.724247.com-湖北福彩快三能玩吗| www.796445.com-网络彩票稳赢| www.872823.com-彩票时时彩哪个靠谱| www.946880.com-体育彩票高频彩种| www.456390.com-北京彩易达对赌| www.41yv.com-世界杯去哪买彩票| www.027032.com-彩票领奖流程| www.65jd.com-怀化福彩网-| www.cai9422.com贵州体彩兑奖地点| www.g17.cn-海南体彩-| www.62vf.com-晋城市福利彩票站点| www.0595.cx-中彩票双色球走势图| www.721232.com-最新体育彩票投注机| www.rm27.com-云购彩票大发快3网| www.69qo.com-金桥微盘买彩票| www.3889.bid-福彩3d资料图| www.144803.com-nba竞彩预测| www.19333.cc-发彩app是真的吗| www.91030.com-羊城晚报晚晚好彩板| www.085389.com-网上玩彩票能赚钱吗| www.202084.com-江苏快三历史开奖| www.2760.vip-唐山福彩-| www.837638.com-河南福彩最坑人| www.949335.com-金牌团队快三彩票| 易彩网www.99638n.com| www.85mj.com-3d字谜总汇新彩吧| www.993501.com-足彩14场玩法| www.579903.com-甘肃娱乐快三查询| www.21rd.com-288彩票下载| www.477761.com-赣州开福利彩票店| www.591382.com-彩票精准预测软件| www.691863.com-高频彩计划网| www.789161.com-彩妆店装修图| www.875276.com-彩票方下载-| www.8359.com-宁夏快三投注| www.40922.com-亚洲彩票登-| www.6zc.com-年会彩票-| www.40839.com-导航体育彩票| www.014142.com-彩票摇号机作假视频| www.700968.com-福彩3daa牛材网| www.909395.com-彩票规律研究软件| www.695136.com-香港彩富网-| www.9222.vip-航天彩虹干嘛的| www.47577.com-陕西省体彩中心电话| www.081096.com-吉林快三第39期| www.166492.com-快三平台哪个好| www.4673.vip-竞彩让球技巧| www.23799.cc-彩票实体店代购系统| www.66112.cc-福彩选号开奖号| www.106043.com-彩经网排列三和尾走| www.20079.com-四川福利彩票中心| www.05pe.com-富鱼网彩票是真的吗| www.89py.com-彩票定位胆论坛| www.3857.biz-2019年彩票中奖| www.8886.pro-万家乐时时彩总代理| www.830555.com-印象彩票网的网址| www.905637.com-万宝彩票app下载| www.967082.com-怎么买福彩3d| www.cai5234.com安徽快三结果图| www.oc61.com-大众彩票注册送体验| www.066460.com-三分快三规律破解| www.166752.com-吉林快三助手| www.271258.com-甘肃快三和值表图| www.40084.com-七星彩号码走事图| www.617967.com-江苏快三一定走势| www.743377.com-彩宝app官网下载| www.824599.com-搞彩票倾家荡产| www.948472.com-福彩公益慈善俱乐部| www.in46.com-买福利彩票-| www.46ln.com-六亿彩票最新网站| www.2115.com-全民乐彩下载| www.00445.com-华彩赢家怎么买| www.488628.com-51中彩可靠吗| www.76jf.com-42500彩票-| www.178825.com-体彩开奖-|