javascript - 一页上有多张幻灯片

Question

我已阅读询问同样问题的帖子，但我找不到与我正在使用的功能相关的信息

我用 HTML CSS 和 JS 制作了自动幻灯片。这工作得很好，但它不能同时在两个幻灯片上工作。

JS:我尝试了几种不同的方法，最后我尝试为两个幻灯片制作两个独立的功能。这也不起作用

//Necessary variables 
var images = [];
var i = 0;
var time = 2000;

// List of pics
images[0] = "images/nighttime.png";
images[1] = "images/natur.png";
images[2] = "images/shark_1.png";
images[3] = "images/shark_2.jpg";


function autoSlide () {
  document.slide.src = images[i];

  if (i < images.length-1) {
    i++;
  }
  else {
    i = 0;
  }

  setTimeout("autoSlide()", time);
}

window.onload = autoSlide;

                                /* Slideshow 2 */
// Necessary variables
var images_one = [];
var j = 0;

// List of pics
images_one[0] = "images/innredning_1.png";
images_one[1] = "images/innredning_2.png";
images_one[2] = "images/innredning_bad.jpg";


function autoSlide_box2 () {
  document.slide.src = images_one[i];

  if (j < images_one.length-1) {
    j++;
  }
  else {
    j = 0;
  }

  setTimeout("autoSlide()_box2", time);
}

window.onload = autoSlide_box2;

HTML:overlay__content是用于函数openNav()的，它不应该与幻灯片函数有任何关系

<section class="index-content">
        <!-- Denne containeren viser frem bildene. Skifter automatisk-->
<div class="container">
    <figure id="slideshow" onclick="openNav()">
        <img src="images/nighttime.png" name="slide" class="pictures">
    </figure>
</div>

<!-- Denne div'en og alt inni den er usynlig. Kommer frem når man trykker på bildet. Forhåpentligvis-->
<div id="nav" class="overlay">



<div class="overlay__content1">
    <a href="#" class="closeButton" id="closeButton" onclick="closeNav()" style="display:none;"> &times; </a>
    <a href="#" class="arrow" id="moveRight" onclick="plusSlides(1)" style="display:none;"></a>
    <a href="#" class="arrow" id="moveLeft" onclick="plusSlides(-1)" style="display:none;"></a>

    <div class="mySlides fade">

        <img src="images/nighttime.png">

    </div>

    <div class="mySlides fade">

        <img src="images/natur.png">

    </div>

    <div class="mySlides fade">

        <img src="images/shark_1.png">

    </div>

    <div class="mySlides fade" id="threenfour">

            <img src="images/shark_2.jpg">

    </div>

</div>
</div>
</section>


<section class="index-content2">
    <div class="containerLeft">
        <figure id="slideshow" onclick="openNav()">
            <img src="images/innredning_1.png" name="slide" class="pictures">
        </figure>
    </div>

    <!-- Denne div'en og alt inni den er usynlig. Kommer frem når man         trykker på bildet. Forhåpentligvis-->
    <div id="nav" class="overlay">



    <div class="overlay__content2">


        <div class="mySlides fade">

            <img src="images/innredning_1.png">

        </div>

        <div class="mySlides fade">

            <img src="images/innredning_2.png">

        </div>

        <div class="mySlides fade">

            <img src="images/innredning_bad.jpgw">

        </div>


    </div>
    </div>
</section>

Answer 1

我不太清楚，但我认为您正在函数中处理同一张幻灯片:

document.slide.src = images[i];

和

document.slide.src = images_one[i];

也许您需要尝试提供图像 ID，就像 answer 中建议的那样通过 NewToJS