Machen Img-Slideshow mit prev und next-button

Wie kann ich es so machen, dass wenn ich auf Weiter wird Es gehen, um das nächste array-Bild und wenn ich auf zurück klicken, es wird gehen, um das Vorherige array-Bild. Ich bin versucht, ein Bild Diashow, die hat zwei Tasten. zu gehen, um das nächste Bild und ein zu gehen, um das Vorherige Bild

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">



<script>
    var images = new Array(7);  
    images[0] = "Images/lab1.jpeg";
    images[1] = "Images/lab2.jpeg";
    images[2] = "Images/lab3.jpeg";
    images[3] = "Images/lab4.jpeg";
    images[4] = "Images/lab5.jpeg";
    images[5] = "Images/lab6.jpeg";
    images[6] = "Images/lab7.jpeg";
    images[7] = "Images/lab8.jpeg";
    var num_img = 7;
    var cur_img = 1;

  function  goback() {

    if(cur_img>0)
   {

    cur_img = cur_img - 1;
   }else{
    alert("This is the first image");
   }


}

function gofwd(){

    if(cur_img < num_img){

    cur_img = cur_img + 1;
   }else{
      alert("This is the last image");
      }


}


</script>


</script>




</head>
<body>

<div style="border: solid 12px blue; width: 500px; height: 500px;">
<img src="Images/lab1.jpeg" alt="lab1" height="500" width="500">
</div><br>
<input type="button" value="PREVIOUS" id="prev" name="prev" style="color:blue" onclick="goback();" >

<input type="button" value="NEXT" id="next" name="next" style="color:blue" onclick="gofwd();" >





</body>
</html>
InformationsquelleAutor Timothy Wong | 2015-05-30
  1. 0

    Zunächst

    switch ist ein Schlüsselwort in javascript, so dass Sie können nicht verwenden Sie es als ein Bezeichner. So benennen Sie array der Bilder. geben Sie eine id ein, um Ihr Bild in den HTML-Code und versuchen Sie dann den folgenden code ein.

    <script>
    var images = new Array(7);  
    images[0] = "Images/lab1.jpeg";
    images[1] = "Images/lab2.jpeg";
    images[2] = "Images/lab3.jpeg";
    images[3] = "Images/lab4.jpeg";
    images[4] = "Images/lab5.jpeg";
    images[5] = "Images/lab6.jpeg";
    images[6] = "Images/lab7.jpeg";

    var numimg = 7;
    var curimg = 1;

  function  goback() {
    var im=document.getElementById("image");
    if(curimg>0)
   {
    im.src = images[curimg-1];
    curimg = curimg - 1;
   }else{
    alert("This is the first image");
   }


}

function gofwd(){
var im=document.getElementById("image");
    if(curimg < numimg){
    im.src = images[curimg+1];
    curimg = curimg + 1;
   }else{
      alert("This is the last image");
      }


}


</script>

    Wird der HTMl-Code wie

    <div style="border: solid 12px blue; width: 500px; height: 500px;">
<img src="Images/lab1.jpg" alt="lab1" height="500" width="500" id="image" />
</div><br>
<input type="button" value="PREVIOUS" id="prev" name="prev" onclick="goback();" >

<input type="button" value="NEXT" id="next" name="next" onclick="gofwd();" >
    • Es funktioniert immer noch nicht
    • es war ein kleiner Fehler, den ich machte, während typingg nun können Sie versuchen, es sollte funktionieren..
    • Es funktioniert immer noch nicht. Ich vergaß hinzuzufügen, das Letzte array. Ich aktualisierte den code.
    • hier ist das Beispiel für den obigen code. jsbin.com/wijepohebe/1/edit?html,js,output aber es wird nicht erscheinen Warnungen für Alarm, um die Arbeit ausführen, die Ausgabe in der live-Vorschau-Modus.
    • Hey, wenn du zufrieden bist mit der Antwort und die Lösung für Sie gearbeitet können Sie es akzeptieren, da eine Antwort
    InformationsquelleAutor Manish
Schreibe einen Kommentar