使用上一個和下一個按鈕製作Img幻燈片

-1

如何製作它以便當我單擊下一步時它將轉到下一個陣列圖像，當我單擊上一個時，它將轉到上一個陣列圖像。我正在嘗試製作具有兩個按鈕的圖像幻燈片。一來一去的下一張圖片和一個去到以前的圖片使用上一個和下一個按鈕製作Img幻燈片

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

來源

2015-05-30 Timothy Wong

的所有

switch首先是JavaScript中的關鍵字，所以你不能用它作爲標識符。所以重命名你的圖像數組。在HTML中爲圖片添加一個id，然後嘗試下面的代碼。

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

的HTML會像

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

來源

2015-05-30 18:00:14 Manish

它仍然無法正常工作 –

出現了一個小錯誤，我做了，而現在typingg你可以試試它應該工作.. – Manish

它仍然無法正常工作。我忘了添加最後一個數組。我更新了代碼。 –

使用上一個和下一個按鈕製作Img幻燈片

回答

相關問題