Javascript 一页上有几个幻灯片

我读过问同样问题的帖子，但我找不到与我正在使用的函数相关的信息

我用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;

//必要的变量
var图像=[]；
var i=0；
var时间=2000；
//图片列表
图像[0]=“images/nighttime.png”；
images[1]=“images/natur.png”；
images[2]=“images/shark_1.png”；
images[3]=“images/shark_2.jpg”；
函数自动滑动（）{
document.slide.src=图像[i]；
如果（i

HTML:overlay__内容用于函数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>

---

我不太清楚，但我认为您在处理功能中的相同幻灯片：

document.slide.src = images[i];

及

---

也许你需要尝试给出你的图像ID，就像NewToJS在这篇文章中提出的那样，我找到了答案。我必须改变功能，这样它才能改变页面上每个幻灯片的图片

function autoSlide () {

  // Sliding the images
  document.slide.src = images[i];
  document.slide1.src = images_one[j];
  document.slide2.src = images_two[k];

  // Variables reset after going through the array
  if (i < images.length-1) {i++;}
  else {i = 0;}
  if (j < images_one.length-1) {j++;}
  else {j = 0;}
  if (k < images_two.length-1) {k++;}
  else {k = 0;}


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

函数自动滑动（）{
//滑动图像
document.slide.src=图像[i]；
document.slide1.src=images_one[j]；
document.slide2.src=images_two[k]；
//变量在经过数组后重置
如果（i

执行此操作时，第一张幻灯片再次生效，但第二张仍然无效。您为两张图像提供了不同的ID，对吗？（我只是想确保复制粘贴错误很常见…：-D）

function autoSlide () {

  // Sliding the images
  document.slide.src = images[i];
  document.slide1.src = images_one[j];
  document.slide2.src = images_two[k];

  // Variables reset after going through the array
  if (i < images.length-1) {i++;}
  else {i = 0;}
  if (j < images_one.length-1) {j++;}
  else {j = 0;}
  if (k < images_two.length-1) {k++;}
  else {k = 0;}


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