試圖用下一個和上一個按鈕創建一個簡單的JavaScript庫，以回到起點

我是一種新的Javascript。我正在嘗試創建一個帶有下一個和上一個按鈕的簡單圖庫，這些圖片會在單擊時將這些圖像循環顯示在前面。我設法找到一些教程和一些點來讓圖片點擊，但是我堅持我做錯了什麼。下一個/上一個按鈕位於左上角，並且希望以縮略圖圖片的左上角，右下角的上一個縮略圖圖片爲中心。我去過當地的圖書館，仍然無法弄清楚。試圖用下一個和上一個按鈕創建一個簡單的JavaScript庫，以回到起點

我在做什麼錯，怎麼改正？謝謝。

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="test2.css"> 
<title>Simple Playing Around</title> 
</head> 
<script type="text/javascript"> 

var photos=new Array() 
var which=0 
photos[0]='http://i67.tinypic.com/20uv0vp.png' 
photos[1]='http://i67.tinypic.com/20uv0vp.png' 
photos[2]='http://i67.tinypic.com/20uv0vp.png' 
photos[3]='http://i67.tinypic.com/20uv0vp.png' 

function backward(){ 
    if (which > 0){ 
     which=which-1 
     document.images.photoslider.src=photos[which] 
    } 
} 
     function backward(){ 
    if (which>0){ 
    which=which-1; 
    } else { 
    which=photos.length-1; 
    } 
    document.images.photoslider.src=photos[which]; 
} 

function forward(){ 
    if (which<photos.length-1){ 
    which=which+1; 
    } else { 
    which=0; 
    } 
    document.images.photoslider.src=photos[which]; 
} 
} 

</script> 

<form> 
    <input type="button" value="&lt;&lt;Back" onClick="backward()"> 
    <input type="button" value="Next&gt;&gt;" onClick="forward()"> 
</form> 

<body> 

<div class="gallery" align="center"> 
<h3>Thumbnails</h3> 

<div class="thumbnails"> 
<img onmouseover="preview.src=img1.src" name="img1" src="http://i67.tinypic.com/20uv0vp.png" alt="cat" /> 
<img onmouseover="preview.src=img2.src" name="img2" src="http://i67.tinypic.com/20uv0vp.png" alt="cat" /> 
<img onmouseover="preview.src=img3.src" name="img3" src="http://i67.tinypic.com/20uv0vp.png" alt="cat" /> 
<img onmouseover="preview.src=img4.src" name="img4" src="http://i67.tinypic.com/20uv0vp.png" alt="cat" /> 
<img onmouseover="preview.src=img5.src" name="img5" src="http://i67.tinypic.com/20uv0vp.png" alt="cat" /> 
<img onmouseover="preview.src=img6.src" name="img6" src="http://i67.tinypic.com/20uv0vp.png" alt="cat" /> 
<img onmouseover="preview.src=img7.src" name="img7" src="http://i67.tinypic.com/20uv0vp.png" alt="cat" /> 
</div> 

<div class="preview" align="center"> 
<img name="preview" src="http://i67.tinypic.com/20uv0vp.png" alt=""/> 
</div> 
</div> 
</body> 
</html>

來源

2016-02-09 mellamo

試試這個

function forward() 
    { 
     which++; 
     if(which>photos.length-1) 
     { 
      which=0; 
     } 
     document.images.photoslider.src=photos[which]; 
    } 

function backward() 
{ 
    --which; 
    if(which<1) 
    { 
     which=photos.length-1; 
    } 
    document.images.photoslider.src=photos[which]; 
}

來源

2016-02-09 04:50:41 Gomzy

試圖用下一個和上一個按鈕創建一個簡單的JavaScript庫，以回到起點

回答

相關問題