jquery转换ppt为html5,强力推荐，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);