Ich habe zwei einfache Javascript-Diashows auf einer Seite, aber die zweite stoppt die erste funktioniert

Question

Was ist los Leute, ich habe einige Probleme mit diesem Code zu arbeiten. Das Problem ist, dass das Hinzufügen der zweiten Diashow die erste aufhört zu arbeiten, es bewirkt auch, dass die erste Diashow, wenn sie angeklickt wird, das Bild in der zweiten Diashow ändert. Dies ist das erste Mal, dass ich Javascript versuche. Beide Slideshows arbeiten dort selbst, ich habe hineingeschaut und die Zeile document.Lunch.src geändert, um unterschiedliche Namen in der Mitte zu haben. Ich habe auch versucht, diese Zeilenfunktion slideshow() zu Funktion slideshow1() und Funktion slideshow2() für beide Skripts zu ändern, um zu sehen, ob das funktionieren würde, aber ich habe keine Freude. Ich verstehe, dass diese Frage vorher gestellt wurde, da ich alle ähnlichen Fragen durchlaufen habe, aber sie sind vor 2 und 3 Jahren ohne Antworten. Jede Hilfe wird sehr geschätzt.

Hier ist mein Code

<SCRIPT type="text/javascript"> 
     var num = 1 
     img1 = new Image() 
     img1.src = "Lunch2.jpg" 
     img2 = new Image() 
     img2.src = "Lunch.jpg" 

    function slideshow() 
     { 
      num = num + 1 

      if (num == 3) 
      {num = 1} 

     document.Lunch.src=eval("img"+num+".src") 
     } 
</SCRIPT> 

<SCRIPT type="text/javascript"> 
     var num = 1 
     img1 = new Image() 
     img1.src = "Mail.jpg" 
     img2 = new Image() 
     img2.src = "Mail2.jpg" 

     function slideshow() 
      { 
       num = num + 1 

       if (num == 3) 
       {num = 1} 

      document.Mail.src=eval("img"+num+".src") 
      } 
</SCRIPT> 
</head> 

und hier

<IMG SRC = "Lunch2.jpg" NAME = "Lunch" BORDER = 3 alt = ""> 
    <p></p> 
    <A HREF="JavaScript:slideshow()">Click for next picture</A> 

    <IMG SRC = "Mail.jpg" NAME = "Mail" BORDER = 3 alt = ""> 
    <p></p> 
    <A HREF="JavaScript:slideshow()">Click for next picture</A> 

Answer 1

Ihr grundlegendes Problem ist eines der Neudefinition Dinge. Da Sie die slideshow-Funktion nicht mit einem Namespace versehen, wird beim Definieren des zweiten die erste Stelle ersetzt.

So, Sie beenden mit zwei Links, die beide auf die gleiche slideshow Methode aufrufen. Und da die zweite Definition diese Methode die Quelle für document.Mail ersetzt, passiert das.

Wenn Sie nur eine schöne Diashow erstellen möchten, können Sie am besten nachsehen, wie Sie Diashows mit einer beliebigen Anzahl von Frameworks erstellen. Ich glaube Bootstrap ist immer noch beliebt. Siehe here.

Wenn Sie mehr über Namespace JavaScript-Funktionen und Variablen wissen möchten. Ich würde ein Javascript-Tutorial empfehlen. Ich habe keine Empfehlung dafür.