制作的主要原理是，利用绝对定位，把所有图片都重叠在一起。再利用jQuery让图片动态交换，并调整他们的z-index。主要的js代码如下：
function slideSwitch() {
var $current = $("#slideshow div.current");
// 判断div.current个数为0的时候 $current的取值
if ( $current.length == 0 ) $current = $("#slideshow div:last");
// 判断div.current存在时则匹配$current.next(),否则转到第一个div
var $next = $current.next().length ? $current.next() : $("#slideshow div:first");
$current.addClass('prev');
$next.css({opacity: 0.0}).addClass("current").animate({opacity: 1.0}, 1000, function() {
//因为原理是层叠,删除类,让z-index的值只放在轮转到的div.current,从而最前端显示
$current.removeClass("current prev");
});
} $(function() {
$("#slideshow span").css("opacity","0.7");
$(".current").css("opacity","1.0");
// 设定时间为3秒(1000=1秒)
setInterval( "slideSwitch()", 3000 );
});
而在HTML要注意的是，记得为第一个#slideshow里面的第一个DIV加上class="current"。如果你有更好的制作Slide Show的方法，欢迎拿来大家一起探讨。