JQuery实现定时切换全屏banner

如需设置全屏幕的banner，就不能用到img元素了，而是需要设置background-image，使背景图片垂直和水平居中，然后不重复。此全屏banner图片的宽度一般为1920px，很宽了。

通过上面的设置，可以保证不同宽度的屏幕打开网页时，都可以使全屏banner的图片位于中间显示，且不会出现滚动条。一般图片的中心内容也是放在中间的，所以用户体验会很好。

假如有3张图片需要每隔3秒钟进行切换一次，且需要切换的淡入淡出的效果，那么可以通过下面的代码来实现。

HTML部分

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轮播除了需要考虑时间的因素外，还需要有鼠标悬停之后暂时停止轮播，然后鼠标离开后再次开启轮播；还需有用于鼠标点击的上下箭头等等功能。