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.267586.com-彩票概率-| www.cai7678.com广西快三走势图| www.269173.com-5g彩票-| www.6666.cx-百盈快3彩票下载| www.94737.cc-历年福彩销售额| www.74yw.com-彩票投注网站什么好| www.885096.com-神洲彩票网-| 爱米彩www.am2220.com| www.545556.com-彩票推广员好做吗| www.98657.com-快三筛子-| www.75fb.com-体彩任九开奖| www.679636.com-玩彩票软件怎么样| www.66263.com-手机彩票怎么买彩票| www.704737.com-在998彩票注册| www.802361.com-全能中彩世界杯| www.897456.com-今晚足球竞彩| www.984657.com-彩运8是真的吗| www.184.me-体育彩票可以转让| www.193455.com-彩票遗漏k线的技巧| www.31tf.com-周日什么彩票| www.775823.com-90彩票平台登陆页| www.003514.com-盈彩快3-| www.719896.com-七星彩复式容易中吗| www.919792.com-手机彩票平台源码| www.643768.com-竞彩奖金计算公式| www.094123.com-可以控制的彩票软件| www.19oa.com-足彩19040预测| www.039215.com-够力彩-| www.53262.cc-湖北快三中大奖| www.096163.com-众彩网迟丽颖| www.181259.com-广东好彩3-| www.84455.cc-彩钢瓦426是多厚| www.7779.win-众发彩票是不是骗局| www.15263.com-博众时时彩软件组六| www.64368.com-官方竞彩app下载| www.351991.com-体彩店没有双色球吗| www.466017.com-极速秒秒彩是真的吗| www.21361.cc-彩争霸神8-| www.753762.com-搜狗彩票是不是假的| www.907576.com-快彩活动app| www.976245.com-彩红世界app下载| www.cp5221.com-青海快三今天开奖号| www.347311.com-易盈彩票合法吗| www.493332.com-彩票开奖源去哪买| www.570362.com-七彩幸福菊真的假的| www.657217.com-福彩3d林涛字谜| www.868857.com-七星彩精准计划软件| www.938552.com-快三推荐湖北| www.987583.com-福利彩票全国兑奖| www.cd81.com-黑彩员工判几年| www.ux85.com-江苏快三预测助手| www.26zc.com-东莞长安福利彩票店| www.059478.com-河北快三奖金计算| www.471703.com-有台湾5分彩的平台| www.589896.com-今天开奖七星彩图| www.325787.com-新浪彩票开奖结果| www.423051.com-体彩p3图谜图库| www.559520.com-七星彩众彩网专家| www.627108.com-樂都城彩票-| www.712783.com-7星彩开奖历史| 彩民网www.76520x.com| www.726771.com-那个app能买彩票| www.882541.com-三分彩人工在线计划| www.984407.com-神童免费资料中彩网| www.qb75.com-2019年彩票开奖| www.1015.com-香港跑马彩票走势图| www.6598.bid-大有彩票注册地址| www.441670.com-体育彩票异地兑奖| www.771519.com-时时彩买法漏洞| www.479105.com-扬州公道体彩中奖| www.567246.com-沈阳二手旋风彩虹机| www.638678.com-上海体育彩票店| www.704879.com-体育彩票在哪兑奖| www.360437.com-彩票心理学-| www.02697.com-什么是彩妆化妆品| www.565596.com-福彩中奖怎么派奖| www.665729.com-山东体彩论论坛| www.219955.com-武汉福彩快三店转让| www.393951.com-久彩app-| www.592078.com-七星彩质合走势图l| www.564675.com-亚洲彩票app下载| www.663821.com-分分彩哪种打法稳赚| www.751496.com-521彩票-| www.897986.com-中国体育彩票宣传语| www.984044.com-四川福彩兑奖方式| www.cm.com-038彩票app-| www.139064.com-遵义彩票-| www.231732.com-中国彩吧网开奖号| www.729165.com-福彩3d乐彩论文坛| www.910051.com-高频彩平台网址| www.217229.com-彩票大全ios| www.617539.com-齐鲁风采彩票| www.co44.com-qq群里快三倍投| www.096893.com-体彩的利润-| www.fv45.com-导师带你买彩票骗局| www.591785.com-竞彩官方和澳门对比| www.710272.com-谁有彩票店微信| www.803717.com-百宝彩票可靠吗| www.877355.com-彩票预测与查询| www.075218.com-大乐透彩票资讯| www.370269.com-网络福彩被骗| www.20ek.com-彩票可以追多少期| www.7018.vip-成都七彩田野关门了| www.266335.com-乐彩图表-| www.800232.com-上海彩票自助| www.878613.cc-99彩票平台-| www.946711.com-工地临时彩钢瓦围墙| www.987104.com-火前彩票vip| www.mt6.com-湖北快三预测分析| www.413.cm-河南幸运彩票玩法| www.5632.biz-高频彩票调整实体店| www.65071.com-竞彩怎么网上找客户| www.16819.cc-辽宁福彩三十五选七| www.53757.cc-澳洲国际时时彩| www.007111.com-高频五分彩开奖网址| www.110805.com-山西福利彩票十分钟| www.175715.com-苹果快三助手免费版| www.247383.com-上海福彩天天彩选四| www.894221.com-779彩票苹果版| www.980775.com-微信群老师买彩票| www.li5.com-河北省快三走势图表| www.624217.com-如何下58彩票| www.882840.com-大佬彩票-| www.8995.top-新加坡30秒彩骗局| www.166520.com-快三贵州-| www.244699.com-福彩中大奖-| www.23887.cc-彩计划下载在哪下载| www.yu04.com-云南体彩中心| www.54ye.com-彩票兑换中心商品| www.1111.blue-上海福彩网正宗吗| www.218752.com-福建福彩双色球| www.3648.cc-福彩3d牛票票赛票| www.7989.top-博彩官网-| www.278078.com-彩票曝光-| www.353205.com-广东彩钢夹心板厂| www.425448.com-重庆时时彩遗漏数据| www.533147.com-福彩3d实战讲座| www.711164.com-人人中彩票能提现吗| www.783674.com-青岛福彩养老院电话| www.852567.com-腾讯分分彩五星走势| www.628610.com-921彩票-| www.72414.com-易彩宝-| www.850697.com-怎么选彩票号码| www.077181.com-福利彩票什么玩| www.579108.com-福利彩票怎么算奖| www.231315.com-快三日赚千元技巧| www.7325.biz-彩虹六号辅助提卡| www.7042.org-盛大彩票手机app| www.571661.com-好彩门户天下好彩1| www.257320.com-手机版彩票软件| www.eh2.com-中彩网app-| www.118953.com-中国福利彩票预测| www.744484.com-彩虫官方下载| www.843109.com-福彩中心工资| www.926176.com-如何从手机买彩票| 天天赢彩票www.73736f.com| www.108494.com-买彩票上瘾的后果| www.211432.com-有没有快三准确计划| www.981259.com-六开彩app-| www.078454.com-赢彩彩票吧-| www.223655.com-彩乐乐专家杀码| www.vf91.com-大发快三大小心得| www.791409.com-彩票复式机选软件| www.962758.com-彩皇网我的注册|