如需设置全屏幕的banner，就不能用到img元素了，而是需要设置background-image，使背景图片垂直和水平居中，然后不重复。此全屏banner图片的宽度一般为1920px，很宽了。
通过上面的设置，可以保证不同宽度的屏幕打开网页时，都可以使全屏banner的图片位于中间显示，且不会出现滚动条。一般图片的中心内容也是放在中间的，所以用户体验会很好。
假如有3张图片需要每隔3秒钟进行切换一次，且需要切换的淡入淡出的效果，那么可以通过下面的代码来实现。
HTML部分
<div class="banner">
<ul class="banner_area">
<li class="banner_area_1"><a href="1.html"></a></li>
<li class="banner_area_2"><a href="2.html"></a></li>
<li class="banner_area_3"><a href="3.html"></a></li>
</ul>
</div>
CSS部分
.banner_box{height: 452px;}
.banner_area{position: relative;}
.banner_area li{position: absolute;width: 100%;}
.banner_area li a{display: block;width: 100%;height: 100%;}
.banner_area_1{background: url(../img/banner.jpg) center center no-repeat; height: 452px;z-index: 100;}
.banner_area_2{background: url(../img/banner2.jpg) center center no-repeat; height: 452px;z-index: 99;}
.banner_area_3{background: url(../img/banner3.jpg) center center no-repeat; height: 452px;z-index: 98;}
高度设置为图片的高度即可，即此时三个banner图片的尺寸便是1920px*452px。ul内部的三个li元素用于设置background，然后设置他们的属性为绝对定位，即position:absolute，脱离正常的网页从上到下的排列。之后通过jQuery定时改变其属性z-index即可让图片实现轮播效果。
jQuery部分
var i=0;
function toggle_banner(){
i++;
var now_banner = ".banner_area_" + i;
var now_index = $(now_banner).css("z-index");
var now_index = now_index - 3;
$(now_banner).animate({opacity:"0"},function(){
$(now_banner).css("z-index",now_index).css("opacity","1");
});
if (i==3) {i=0}
t = setTimeout("toggle_banner()",3000)
}
$(document).ready(function(){
t2 = setTimeout("toggle_banner()",3000);
});
核心思想便是每隔三秒轮流使ul里面的li元素的属性z-index减去3，减去之后网页便会显示下一个z-index值最大的li元素。
animate({opacity:"0"})是用jQuery动画改变上一个元素的透明度，这样子就会出现淡出的效果。
setTimeout设置3秒钟调用一次。
总结
上面的功能非常简单，一般网页中的全屏banner轮播除了需要考虑时间的因素外，还需要有鼠标悬停之后暂时停止轮播，然后鼠标离开后再次开启轮播；还需有用于鼠标点击的上下箭头等等功能。
