摘要：
　　本文主要用原生javascript实现一个网页中常见的自动切换全屏横幅广告的效果。此效果的原型可理解为通过定时器来修改元素的高度及背景属性。效果比较简单，相信看官们可以学会哦......

一、demo案例欣赏

简版demo：如果想看全屏效果,点此进入全屏

大致就是上面的这样一个效果，目前很多网站中都使用过此特效。比如：淘宝首页，配图：还有一些传统行业网站，只不过横幅广告没有淘宝的大气罢了。如果看官对此特效感兴趣，可跟着艺灵进行学习哦~

二、原理分析

正常情况下，页面一加载就会自动去触发上面的效果，但艺灵这里为了让看官更好的看到效果，所以上面添加了一个点击事件。所以在分析过程中，这个点击事件我们可以忽略不计。

正式分析开始：
1、用户一打开页面的时候先展示一张比较大(大：通常指高度)的横幅广告(也可理解为初始状态下默认展示的横幅广告)；
2、几秒过后，我们的广告开始向上收缩，收缩值可自由控制。案例中向上收缩到0px；
3、当收缩结束后，我们要将原广告图更换成一张小(小：通常指高度)的广告图。如果第二步收缩值为0的话，此处还要进行向下伸展高度，此时的高度是小图的高度，目的是让小图完全展示完整。

分析完成后，我们就来愉快的码代码吧！此处我们使用原生的javascript来实现这个效果，这也是艺灵第一次写原生javascript方面的教程，之前一直习惯用jquery，毕竟jquery在实现功能上，代码非常精简。

三、准备工作

编辑器一个，初始大横幅广告图一张，小广告图一张即可。如果没有广告图，我们可以用css中的背景色来代替。只要会了原理，换图已不成问题！

四、源码分享

4.1、html代码

<!--全屏横幅广告开始-->
<div id="ad-banner"></div>
<!--全屏横幅广告结束-->

在页面中，我们只需要添加这样的一行代码即可。至于位置，如果看官想在顶部显示这个效果那就不要把此代码放尾部，明白？？？

4.2、css样式

<style type="text/css">
/*页面简单重构，如果看官页面中已有，请不要复制这几行*/
*{margin:0;padding:0}
/*重构结束*/
/*横幅广告*/
#ad-banner{background:url(这里放你的初始图片地址) no-repeat 50% 0;margin:0 auto;height:图片对应的高度，例如：200px}
</style>

此时的效果配图：接下来就是重要的部分了。

4.3、原生javascript

<!--自动切换全屏横幅广告代码，请将这段javascript放页面中的</body>前面，下面代码中黄色高亮部分均为可修改项-->
<script type="text/javascript">
	/*页面加载完后执行*/
	window.onload=function(){
		/*获取广告元素id*/
		var ad=document.getElementById("ad-banner");
		/*设置此元素高度为0，数值0可根据自己的需求进行修改*/
		ad.style.height=0+'px';
		/*动画执行的过滤时间为1秒，数值1可修改*/
		ad.style.transition=1+'s';
		/*定时器，作用是当上面的执行完后再执行，避免同时执行时因间隔时间太短而看不到想要的效果......*/
		setTimeout(function(){
			/*重置元素高度为小广告的高度，数值可修改*/
			ad.style.height=48+'px';
			/*动画执行的过滤时间为.5秒，数值可修改*/
			ad.style.transition=.5+'s';
			/*更换广告图片路径，路径可修改*/
			ad.style.backgroundImage='url(http://www.wowobao.com/skin/wowobao_skin/image/20160520/ad-banner022.png)';
		},1000);
		/*数值1000为1秒后再执行，数值可修改*/
	}
</script>

好了，大功告成！

五、最终案例欣赏

成品demo：如果想看全屏效果,点此进入全屏

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2016-06-05/410.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。