2012-12-13 7 views
13

I wanna Bild Diashow auf meiner Web machen, hier ist mein CodeWie erstellt man eine Diashow 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> 

Warum funktioniert es nicht? Ich habe Bild, das ich will, in Bilder Ordner

+0

Sie haben hat die Funktion slide() deklariert, aber du rufst sie nirgends an. – Matthias

+1

';' am Ende jeder Zeile fehlt –

+0

@Matthias 'slieit()' heißt kurz nach seiner Deklaration –

Antwort

3

Anstatt den Code von Grund auf neu schreiben können Sie jquery Plug-in setzen. Solche Plug-in kann viele Konfigurationsoption ebenso.

Hier ist der, den ich am meisten mochte.

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

+0

Ich würde gerne jquery verwenden, aber ich habe es noch nicht gelernt – greenthunder

+0

Sie müssen jquery nicht lernen, diesen Stecker zu verwenden. Folgen Sie einfach den gut erläuterten Anweisungen. So viel ist ausreichend. –

13
  1. Set var Schritt = 1 als globale Variable, indem sie es über den Funktionsaufruf
  2. put Semikolons

setzen Sie wird diese aussehen

<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> 
+1

Wie wäre es, wenn Sie den Schieberegler stattdessen mit einem Klick verbinden? Damit der Benutzer durchblättern kann und nicht auf den Timer warten muss? –