Come creare slideshow di immagini in html?

Voglio fare slideshow immagine sul mio web, ecco il mio codiceCome creare slideshow di immagini in html?

<head> 
<script type="text/javascript"> 
    var image1 = new Image() 
    image1.src = "images/pentagg.jpg" 
    var image2 = new Image() 
    image2.src = "images/promo.jpg" 
</script> 
</head> 
<body> 
<p><img src="images/pentagg.jpg" width="500" height="300" name="slide" /></p> 
    <script type="text/javascript"> 
      function slideit() 
      { 
       var step=1; 
       document.images.slide.src = eval("image"+step+".src") 
       if(step<2) 
        step++ 
       else 
        step=1 
       setTimeout("slideit()",2500) 
      } 
      slideit() 
    </script> 
</body>

Perché non funziona? Ho messo l'immagine che voglio nella cartella immagini

fonte

2012-12-13 greenthunder

Hai ha dichiarato la funzione slideit(), ma non la chiami da nessuna parte. – Matthias

';' alla fine di ogni riga manca –

@Matthias 'slideit()' viene chiamato subito dopo la sua dichiarazione –

Invece di scrivere il codice da zero, è possibile utilizzare il plug-in jquery. Tale plug-in può fornire anche molte opzioni di configurazione.

Ecco quello che mi è piaciuto di più.

http://www.zurb.com/playground/orbit-jquery-image-slider

fonte

2012-12-13 13:21:56

Vorrei usare jquery, ma non l'ho ancora imparato – greenthunder

Non devi imparare jquery per usare questo plug-in. Segui semplicemente le istruzioni spiegate bene. Questo è sufficiente. –

Set var passo = 1 come variabile globale mettendolo al di sopra della chiamata di funzione
put e virgola

Si sarà simile a questa

<head> 
<script type="text/javascript"> 
var image1 = new Image() 
image1.src = "images/pentagg.jpg" 
var image2 = new Image() 
image2.src = "images/promo.jpg" 
</script> 
</head> 
<body> 
<p><img src="images/pentagg.jpg" width="500" height="300" name="slide" /></p> 
<script type="text/javascript"> 
     var step=1; 
     function slideit() 
     { 
      document.images.slide.src = eval("image"+step+".src"); 
      if(step<2) 
       step++; 
      else 
       step=1; 
      setTimeout("slideit()",2500); 
     } 
     slideit(); 
</script> 
</body>

fonte

2013-04-22 07:12:08 Jem

Che ne dici di legare il cursore a un clic? In modo che l'utente possa scorrere e non dover attendere il timer? –

Come creare slideshow di immagini in html?

risposta

Problemi correlati