强力推荐，HTML5与JQuery结合的幻灯片

$(window).load(function(){
//我们监听了 window.load 事件，因此我们确定幻灯片上的所有图片都能够正确进行加载。
//测试当前浏览器是否支持canvas元素
var supportCanvas = 'getContext' in document.createElement('canvas');

//图片的canvas效果操作是受CPU渲染影响的，
//这就是为什么我们要使用setTimeout异步地来操作它们
//这样就能提升页面的响应

var slides = $('#slideshow li'),
current = 0,
slideshow = {width:0,height:0};
setTimeout(function(){
if(supportCanvas){
$('#slideshow img').each(function(){
if(!slideshow.width){

//保存首张图片的尺寸
slideshow.width = this.width;
slideshow.height = this.height;
}

//渲染修改后图像的版本
createCanvasOverlay(this);
});
}
$('#slideshow .arrow').click(function(){
var li            = slides.eq(current),
canvas        = li.find('canvas'),
nextIndex    = 0;

//取决于这个是下一张箭头的按钮还是上一张箭头的按钮,
//计算出下一张幻灯片的索引号。
if($(this).hasClass('next')){
nextIndex = current >= slides.length-1 ? 0 : current+1;
}
else {
nextIndex = current <= 0 ? slides.length-1 : current-1;
}
var next = slides.eq(nextIndex);
if(supportCanvas){

//若当前浏览器支持canvas
canvas.fadeIn(function(){

//显示下一张的幻灯片
next.show();
current = nextIndex;
//隐藏当前的幻灯片
li.fadeOut(function(){
li.removeClass('slideActive');
canvas.hide();
next.addClass('slideActive');
});
});
}
else {
//若当前浏览器不支持canvas元素。
//使用幻灯片普通版本
current=nextIndex;
next.addClass('slideActive').show();
li.removeClass('slideActive').hide();
}
});
},100);