幻燈片計數器不進行重置多個陣列

Question

我有一個簡單的幻燈片式應用程序，它是在我的網頁的多個部分。每個幻燈片放映都有一個數組，用於保存每個幻燈片的特定信息。我遇到的問題是，當我使用一個幻燈片並循環訪問數組中的最後一個元素，然後轉到另一個幻燈片演示時，我需要多次單擊才能讓新陣列開始循環播放。我知道問題是，我創建的計數器變量沒有重置，但我不知道爲什麼或如何解決它。誰能提供解決方案？

HTML

<section id="games" class="page"> 
    <div class="slideshow"> 
     <div class="screen"></div> 
     <div class="desc"> 
      <p>Solar System Sim is a 3D simulation of our galaxy built in Unity and written in C#. Clicking on each planet in the simulation will zoom and center on the planet, while clicking on the sun will return the camera to its original position.</p> 
     </div> 
     <div class="controls"> 
      <span class="control left"></span> 
      <span class="control right"></span> 
     </div> 
    </div> 
</section> 
<section id="webApps" class="page"> 
    <div class="slideshow"> 
     <div class="screen"></div> 
     <div class="desc"> 
      <p>Word Count</p> 
     </div> 
     <div class="controls"> 
      <span class="control left"></span> 
      <span class="control right"></span> 
     </div> 
    </div> 
</section> 

JS

var counter = 0; 
var screen = document.getElementsByClassName("screen"); 
var control = document.getElementsByClassName("control"); 
for(var i = 0; i < control.length; i++){ 
    control[i].onclick = function(){ 
     var leftArrowClicked = this.classList.contains("left"); 
     var rightArrowClicked = this.classList.contains("right"); 
     SlideShowControls = function(){ 
      if(leftArrowClicked){ 
       counter--; 
      } 
      if(rightArrowClicked){ 
       counter++; 
      } 
      SlideShow = function(slides, whichSlideShow){ 
       var desc = document.getElementsByClassName("desc")[whichSlideShow].getElementsByTagName("p")[0]; 
       if(counter < 0){ 
        counter = slides.length - 1; 
       } 
       if(counter > slides.length - 1){ 
        counter = 0; 
       } 
       desc.textContent = slides[counter][0]; 
       screen[whichSlideShow].style.backgroundImage = "url(" +slides[counter][1] +")"; 
      } 
      if(CurrentPage.page == "games"){ 
       SlideShow(games, 0); 
      } 
      if(CurrentPage.page == "webApps"){ 
       SlideShow(webApps, 1); 
      } 
      console.log(counter); 
     } 
     SlideShowControls(); 
    } 
} 

Answer 1

您可能要綁定您的幻燈片顯示在每個方向對，使他們不互相影響：

function SlideShow(slides,descid, left, right){ 
//to prevent bugs: 
if(!(slides&&descid!==undefined&&left&&right)){console.error("missing args");return;} 

//the magic unique counter 
var counter=0; 

//the event handlers: 
left.onclick=function(){counter--;update()}; 
right.onclick=function(){counter++;update();}; 

//the function to redraw the slide 
function update(){ 
var desc = document.getElementsByClassName("desc")[descid].getElementsByTagName("p")[0]; 
    if(counter < 0){ 
    counter = slides.length - 1; 
    } 
    if(counter > slides.length - 1){ 
    counter = 0; 
    } 
    desc.textContent = slides[counter][0]; 
    screen[descid].style.backgroundImage = "url(" +slides[counter][1] +")"; 
} 

//draw the slide the first time 
update(); 
} 

如下使用：

var arrow=document.getElementsByClassName("control"); 
SlideShow(games,0,arrow[0],arrow[1]); 
SlideShow(webApps,1,arrow[2],arrow[3]); 

主要問題是，只有一次存在計數器，而您有多張幻燈片。我已將計數器放入slideShow函數，因此它通過閉包綁定到事件偵聽器。香港專業教育學院還調整了您的代碼，它的更換你的

Answer 2

在這個代碼：

if(leftArrowClicked){ 
    counter--; 
} 
if(rightArrowClicked){ 
    counter++; 
} 

，當你達到0或N，是NE的你應該考慮到幻燈片的數量，否則，你可以得到負或飽和值，並點擊箭頭的時候什麼都不會moveuntil你達到一個有效值

Answer 3

1 - 我建議你要避免出現任何問題，你必須封裝你的代碼中的函數，把它稱爲。

2 - 檢查這個

  if(leftArrowClicked && counter != 0){ 
       counter--; 
      } 
      if(rightArrowClicked && counter <= slides.length){ 
       counter++; 
      } 

我希望這有助於你