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]);

主要问题是计数器只存在一次，而你有多个幻灯片。我把counter放到了slideShow函数中，所以它通过Closures绑定到事件监听器。我还重新组织了你的代码，它取代了你的代码

Answer 2

在此代码中：

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

当你达到0或n时，你应该考虑到幻灯片的数量，否则，你可以得到负值或饱和值，当点击箭头时，没有任何东西会在你达到有效值时移动

Answer 3

1 - 我建议你避免任何问题，你必须将你的代码封装在一个函数中并调用它。

2 - 检查此

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

我希望这有助于你

幻灯片计数器不会重置多个阵列

3 个答案: