diaporama ne répond pas correctement avec la fonction cliquable

Question

J'ai trouvé un curseur facile à afficher que des images, c'est exactement ce dont j'ai besoin, mais ça ne fonctionne pas, le curseur est livré avec deux icônes flèches, mais quand je clique dessus; les images ne changent pas.

C'est ce que j'ai:

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; 
} 

ET 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

travail Plunker Example

Avec votre code, vous devez trouver un moyen de définir la valeur supportCanvas ou supprimer ce code, dans l'exemple, je l'ai défini sur false. Incluez également JQuery avant d'inclure votre propre script. J'ai ajouté ce qui suit et votre code travaillé

supportCanvas = false; 

et

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