如何讓這個JavaScript幻燈片正常工作？

Question

我想創建一個圖像幻燈片。我將7張圖像添加到數組中。幻燈片放映從image0.jpg開始，當用戶點擊右箭頭時，我想讓javascript在數組中插入下一張圖片（image1.jpg）。問題是，img變量不會超過1.有人可以幫助我讓這個幻燈片工作？

HTML

<h1>Swap Image Experiment</h1> 
    <div class="slideshow"> 
     <div id="myImages"> 
      <img id="test" src="images/image0.jpg"> 
     </div> 
     <div class="arrows"> 
      <div id="left" onClick="swapPicture(-1)"></div> 
      <div id="right" onClick="swapPicture(+1)"></div> 
     </div> 
    </div> 
    <script src="js/script.js"></script> 
</body> 

的JavaScript

var dImages = new Array(); 
var numImages = 6; 

for(i=0;i<numImages;i++) 
{ 
    dImages[i]=new Image(); 
    dImages[i].src="images/image"+(i)+".jpg"; 
} 

function swapPicture(target) { 
    img = 0; 
    image = document.getElementById("test") 
    img = img + target; 
    console.log(img); 
    image.src = "images/image"+(img)+".jpg"; 
} 

Answer 1

你應該改變img從一個局部變量全局變量。現在每次當執行一個功能的時候，img將被設置爲0，所以將其更改爲

var img = 0; 
function swapPicture(target) { 
    image = document.getElementById("test") 
    img = img + target; 
    console.log(img); 
    image.src = "images/image"+(img)+".jpg"; 
} 

Answer 2

隨着Dacaspex的答案，你要記得循環回PIC 5（假定爲0-5的6張圖片）如果他們左轉而不是右轉。如果它們在5時正確地循環，則也循環到0 ...

var img = 0; 
function swapPicture(target) { 
    image = document.getElementById("test") 
    img = img + target; 
    console.log(img); 
    if(img < 0) 
    { 
     img = 5; 
    } 
    else 
    { 
     if(img > 5) 
     { 
      img = 0; 
     } 
    } 
    image.src = "images/image"+(img)+".jpg"; 
}