幻燈片放映沒有正確響應，點擊功能

Question

我發現一個簡單的滑塊只顯示圖像，這正是我需要的，但它不工作，滑塊帶有兩個箭頭圖標，但當我點擊它們時;圖像不會改變。

這是我有：

HTML：

<div id="slideshow"> 

    <ul class="slides"> 
     <li><img src="img/photos/1.jpg" width="620" height="320" alt="" /> 
     <li><img src="img/photos/2.jpg" width="620" height="320" alt="" /></li> 
     <li><img src="img/photos/3.jpg" width="620" height="320" alt="" /></li> 
     <li><img src="img/photos/4.jpg" width="620" height="320" alt="" /></li> 
    </ul> 

    <span class="arrow previous"></span> 
    <span class="arrow next"></span> 
</div> 

CSS：

*{ 
    margin: 0; 
    padding: 0; 
} 

body{ 
    color: #eee; 
    font: 13px "Lucida Sans Unicode", Arial, Helvetica, sans-serif; 
} 

#slideshow{ 
    background-color: #F5F5F5; 
    border: 1px solid #FFFFFF; 
    height: 340px; 
    margin: 190px auto 0; 
    position: relative; 
    width: 640px; 

    -moz-box-shadow: 0 0 22px #111; 
    -webkit-box-shadow: 0 0 22px #111; 
    box-shadow: 0 0 22px #111; 
} 

#slideshow ul{ 
    height: 320px; 
    left: 10px; 
    list-style: none outside none; 
    overflow: hidden; 
    position: absolute; 
    top: 10px; 
    width: 620px; 
} 

#slideshow li { 
    position: absolute; 
    display: none; 
    z-index: 10; 
} 

#slideshow li:first-child{ 
    display: block; 
    z-index: 1000; 
} 

#slideshow .slideActive{ 
    z-index: 1000; 
} 

#slideshow canvas{ 
    display: none; 
    position: absolute; 
    z-index: 100; 
} 

#slideshow .arrow{ 
    height: 86px; 
    width: 60px; 
    position: absolute; 
    background: url('img/arrows.png') no-repeat; 
    top: 50%; 
    margin-top: -43px; 
    cursor: pointer; 
    z-index: 5000; 
} 

#slideshow .previous{ 
    background-position: left top;left:0; 
} 

#slideshow .previous:hover{ 
    background-position: left bottom; 
} 

#slideshow .next{ 
    background-position: right top; 
    right:0; 
} 

#slideshow .next:hover{ 
    background-position: right bottom; 
} 

及JS：

$(window).load(function(){ 

    var slides = $('#slideshow li'), 
     current = 0, 
     slideshow = {width:0,height:0}; 

    setTimeout(function(){ 

     window.console && window.console.time && console.time('Generated In'); 

     if(supportCanvas){ 
      $('#slideshow img').each(function(){ 

       if(!slideshow.width){ 
        // Taking the dimensions of the first image: 
        slideshow.width = this.width; 
        slideshow.height = this.height; 
       } 

       // Rendering the modified versions of the images: 
       createCanvasOverlay(this); 
      }); 
     } 

     window.console && window.console.timeEnd && console.timeEnd('Generated In'); 

     $('#slideshow .arrow').click(function(){ 
      var li   = slides.eq(current), 
       canvas  = li.find('canvas'), 
       nextIndex = 0; 

      // Depending on whether this is the next or previous 
      // arrow, calculate the index of the next slide accordingly. 

      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){ 

       // This browser supports canvas, fade it into view: 

       canvas.fadeIn(function(){ 

        // Show the next slide below the current one: 
        next.show(); 
        current = nextIndex; 

        // Fade the current slide out of view: 
        li.fadeOut(function(){ 
         li.removeClass('slideActive'); 
         canvas.hide(); 
         next.addClass('slideActive'); 
        }); 
       }); 
      } 
      else { 

       // This browser does not support canvas. 
       // Use the plain version of the slideshow. 

       current=nextIndex; 
       next.addClass('slideActive').show(); 
       li.removeClass('slideActive').hide(); 
      } 
     }); 

    },100); 

    // This function takes an image and renders 
    // a version of it similar to the Overlay blending 
    // mode in Photoshop. 

    function createCanvasOverlay(image){ 

     var canvas   = document.createElement('canvas'), 
      canvasContext = canvas.getContext("2d"); 

     // Make it the same size as the image 
     canvas.width = slideshow.width; 
     canvas.height = slideshow.height; 

     // Drawing the default version of the image on the canvas: 
     canvasContext.drawImage(image,0,0); 


     // Taking the image data and storing it in the imageData array: 
     var imageData = canvasContext.getImageData(0,0,canvas.width,canvas.height), 
      data  = imageData.data; 

     // Loop through all the pixels in the imageData array, and modify 
     // the red, green, and blue color values. 

     for(var i = 0,z=data.length;i<z;i++){ 

      // The values for red, green and blue are consecutive elements 
      // in the imageData array. We modify the three of them at once: 

      data[i] = ((data[i] < 128) ? (2*data[i]*data[i]/255) : (255 - 2 * (255 - data[i]) * (255 - data[i])/255)); 
      data[++i] = ((data[i] < 128) ? (2*data[i]*data[i]/255) : (255 - 2 * (255 - data[i]) * (255 - data[i])/255)); 
      data[++i] = ((data[i] < 128) ? (2*data[i]*data[i]/255) : (255 - 2 * (255 - data[i]) * (255 - data[i])/255)); 

      // After the RGB elements is the alpha value, but we leave it the same. 
      ++i; 
     } 

     // Putting the modified imageData back to the canvas. 
     canvasContext.putImageData(imageData,0,0); 

     // Inserting the canvas in the DOM, before the image: 
     image.parentNode.insertBefore(canvas,image); 
    } 

}); 

Answer 1

工作Plunker Example

使用你的代碼，你必須找到一種方法來設置supportCanvas值或刪除代碼，在這個例子中我將它設置爲false。在包含自己的腳本之前還包括JQuery。我增加了以下內容，你的代碼工作

supportCanvas = false; 

和

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="script.js"></script>