jQuery Slide Show – jQuery幻灯片效果

制作的主要原理是，利用绝对定位，把所有图片都重叠在一起。再利用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的方法，欢迎拿来大家一起探讨。