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

文章详情（附demo和下载）

$(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);