如需設(shè)置全屏幕的banner，就不能用到img元素了谜嫉，而是需要設(shè)置background-image湘纵，使背景圖片垂直和水平居中返弹，然后不重復(fù)锈玉。此全屏banner圖片的寬度一般為1920px爪飘，很寬了。
通過上面的設(shè)置嘲玫，可以保證不同寬度的屏幕打開網(wǎng)頁時悦施，都可以使全屏banner的圖片位于中間顯示，且不會出現(xiàn)滾動條去团。一般圖片的中心內(nèi)容也是放在中間的，所以用戶體驗會很好穷蛹。
假如有3張圖片需要每隔3秒鐘進(jìn)行切換一次土陪，且需要切換的淡入淡出的效果，那么可以通過下面的代碼來實現(xiàn)肴熏。
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;}
高度設(shè)置為圖片的高度即可鬼雀，即此時三個banner圖片的尺寸便是1920px*452px。ul內(nèi)部的三個li元素用于設(shè)置background蛙吏，然后設(shè)置他們的屬性為絕對定位源哩，即position:absolute，脫離正常的網(wǎng)頁從上到下的排列鸦做。之后通過jQuery定時改變其屬性z-index即可讓圖片實現(xiàn)輪播效果励烦。
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，減去之后網(wǎng)頁便會顯示下一個z-index值最大的li元素泼诱。
animate({opacity:"0"})是用jQuery動畫改變上一個元素的透明度坛掠，這樣子就會出現(xiàn)淡出的效果。
setTimeout設(shè)置3秒鐘調(diào)用一次治筒。
總結(jié)
上面的功能非常簡單屉栓，一般網(wǎng)頁中的全屏banner輪播除了需要考慮時間的因素外，還需要有鼠標(biāo)懸停之后暫時停止輪播耸袜，然后鼠標(biāo)離開后再次開啟輪播友多；還需有用于鼠標(biāo)點擊的上下箭頭等等功能。
