Несколько слайд-шоу на одной странице - PullRequest
Новая
       6

Несколько слайд-шоу на одной странице

0 голосов
/ 05 ноября 2018

Я прочитал темы, задающие тот же вопрос, но не могу найти информацию, относящуюся к функциям, которые я использую

Я сделал автоматическое слайд-шоу в 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>

Ответы [ 2 ]

0 голосов
/ 05 ноября 2018

Я нашел ответ. Мне пришлось изменить функцию, чтобы она меняла изображения каждого слайд-шоу на странице. 

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);
}
0 голосов
/ 05 ноября 2018

Не знаю точно, но я думаю, что вы используете один и тот же слайд в своих функциях: 

document.slide.src = images[i];

и 

document.slide.src = images_one[i];

может быть, вам нужно попытаться дать идентификаторы ваших изображений, как предложено в этом ответе от NewToJS

...