绝对推荐，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);?
?
?
?
?