闲着无聊，用Jquery写了一个幻灯片效果。
我这人喜欢造*，除了jquery这种有强大开发团队的框架级别JS，其实的一些小程序都是尽量自己写。
一是因为怕出问题了没人问，二是自己写的改起来也方便。
效果可参考：
http://www.helloweba.com/demo/supersized/
只是上面这个DEMO用的是supersized，功能比较强大，就是代码加密过了，读起来很困难。
废话不说，代码放上。
CSS：
img.slider-image {
position:absolute;
display:none;
top:0px;
left:0px;
z-index:-10;
}
img.slider-image.visible {
visibility:visible;
display:inline;
z-index:-1;
}
JS：
2014-12-11 追加：
我把这段代码加到项目里，然后项目马上要结束的时候发现，这货在IE8下面居然无法正常执行。
原因是fadeIn，fadeOut和window.innerWidth 以及 window.innerHeight在IE下无法正常执行。
好吧，一直都是钟爱Chrome，不用IE调试也是我的原罪。
于是我就在代码里加了一个判断，如果是IE的话，就不用fadeIn，fadeOut,
var pic = function (url, parentId,callback) {
this.url = url;
this.id = url.split('/').reverse()[0].split('.')[0];
this.parentId = parentId;
this.img = null;
this.isLoaded = false;
this.load();
this.callback = callback;
}
pic.prototype = {
load: function () {
this.img = new Image();
this.img.src = this.url;
this.img.id = this.id;
this.img.className = "slider-image";
var pic = this;
this.img.onload = function () {
pic.img.onload = null;
pic.img.height = window.innerHeight;
pic.img.width = window.innerWidth;
// 加载完毕，将图片添加到DOM中
$("#" + pic.parentId).append(pic.img);
pic.isLoaded = true;
if (typeof (pic.callback) == "function") {
pic.callback();
}
}
}
}
var slider = function (opt) {
this.opt = {
start: false,// 判断幻灯片开始循环
index: 0,
imgsUrl: null,
interval: 5000,// 幻灯片间隔时间
id :"slider"// 幻灯片DIV ID
}
this.imgs = null;
$.extend(this.opt,opt);
this.init();
}
slider.prototype = {
init: function () {
var slider = this;
// 页面添加幻灯片父级DIV
var div = document.createElement('div');
div.id = slider.opt.id;
div.style.display = "block";
document.body.appendChild(div);
// 加载图片
var imagesUrls = this.opt.imgsUrl;
this.imgs = new Array();
for (var i = 0; i < imagesUrls.length; i++) {
this.imgs.push(
new pic(imagesUrls[i],
slider.opt.id,
function () {
// 图片加载完毕，立即开始循环幻灯片
if (!slider.opt.start) {
slider.opt.start = true;
slider.start();
}
}
));
}
},
slide: function (slider) {
var imagesSrc = slider.imgs;
var img = imagesSrc[slider.opt.index];
// 循环播放幻灯片
slider.opt.index++;
if (slider.opt.index >= imagesSrc.length) {
slider.opt.index = 0;
}
if (img.isLoaded) {
// 将正在显示的图片淡出，将下一张图片淡入
var diplaying = $('#' + slider.opt.id).find('.visible');
// ie 兼容
if (!jQuery.browser.msie) {
diplaying.fadeOut(2000);
}
diplaying.removeClass("visible");
var prepare = $("#" + img.id);
prepare.addClass("visible");
// ie兼容
if (jQuery.browser.msie) {
prepare.css({
"width": document.body.clientWidth,
"height": document.body.clientHeight
});
} else {
prepare.css({
"width": window.innerWidth,
"height":window.innerHeight
});
prepare.fadeIn(1000);
}
} else {
// 如果这张图片没有加载，则立刻显示下张图片
slider.slide(slider);
}
},
start: function () {
var slider = this;
slider.slide(slider)
// 间隔一段时间循环播放幻灯片
setInterval(function () {
slider.slide(slider);
}, this.opt.interval);
}
}
调用的时候，只要执行下面这段代码即可：
new slider({
imgsUrl: ["/Images/Login/slider1.jpg", "/Images/Login/slider2.jpg", "/Images/Login/slider3.jpg"]
});