创建一个HTML5与JQuery结合的幻灯片

1. [代码][JavaScript]代码    

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