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

也许您需要像NewToJS在此answer中所建议的那样，尝试提供图像ID。

Answer 2

我找到了答案。我必须更改功能，以便更改页面上每个幻灯片的图片。

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

一页上的几个幻灯片

2 个答案: