javascript - Make Img Slideshow with prev and next button - Stack Overflow

admin2025-04-22 0

How Do I make it so that when I click Next It will go to the next array image and when I click Previous it will go to the previous array image. I am trying to make a image slide show that has two buttons. one to go to the next picture and one to go to the previous picture

<!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>

<!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>

Share Improve this question edited Jun 1, 2015 at 18:13 asked May 30, 2015 at 16:53 Timothy Wong 951 gold badge1 silver badge14 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 1

First of all

switch is a keyword in javascript so you can not use it as an identifier. So rename you array of images. give an id to your image in the HTML and then try the code below.

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

The HTMl will be like

<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();" >

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745284124a294283.html

javascriptMake Img Slideshow with prev and next buttonStack Overflow

最新回复(0)