如何在一个页面上显示多个自动幻灯片？ [英] How do you get multiple automatic slideshows on one page?

问题描述

我目前正在学习关于在一个页面上获得多个幻灯片的W3HTML/CSS教程。本教程提供了多张幻灯片(手动)或一张自动幻灯片的示例，但没有提供多张(自动)幻灯片的示例。我试图合并教程，记住每个单独幻灯片的索引需要保持不变，但无论我做什么，它都不会自动转换。

这是指向W3教程的链接：https://www.w3schools.com/howto/howto_js_slideshow.asp(https://www.w3schools.com/howto/howto_js_slideshow.asp)

这是我尝试更改/使用以自动切换幻灯片的代码：

var slideIndex = [1,1];
/* Class the members of each slideshow group with different CSS classes */
var slideId = ["mySlides1", "mySlides2"]
showSlides(1, 0);
showSlides(1, 1);

function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
}

function showSlides(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]);
  if (n > x.length) {slideIndex[no] = 1}
  if (n < 1) {slideIndex[no] = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  n++; /* WHAT I ADDED */
  x[slideIndex[no]-1].style.display = "block";
  setTimeout(showSlides(n, x), 2000); /* WHAT I ADDED */
}

代码行旁边的大写注释是我添加到教程代码中的注释。否则，代码的其余部分与教程完全相同，没有任何更改。我尝试了setInterval和在不同位置移动代码，但都不起作用。

推荐答案

只需几处更改即可实现。我还添加了更改延迟的选项，请看：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

/* Find all slideshow containers */
var slideshowContainers = document.getElementsByClassName("slideshow-container");
/* For each container get starting variables */
for(let s = 0; s < slideshowContainers.length; s++) {
    /* Read the new data attribute */        
    var cycle = slideshowContainers[s].dataset.cycle;
    /* Find all the child nodes with class mySlides */
    var slides = slideshowContainers[s].querySelectorAll('.mySlides');
    var slideIndex = 0;
    /* Now we can cycle slides, but this recursive function must have parameters */
    /* slides and cycle never change, those are unique for each slide container */
    /* slideIndex will increase during each iteration */
    showSlides(slides, slideIndex, cycle);
};

/* Function is alsmost same, but now it uses 3 new parameters */
function showSlides(slides, slideIndex, cycle) {
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    };
    slideIndex++;
    if (slideIndex > slides.length) {
        slideIndex = 1
    };
    slides[slideIndex - 1].style.display = "block";
    /* Calling same function, but with new parameters and cycle time */
    setTimeout(function() {
        showSlides(slides, slideIndex, cycle)
    }, cycle);
};

* {
    box-sizing: border-box;
}

body {
    font-family: Verdana, sans-serif;
}

.mySlides {
    display: none;
}

img {
    vertical-align: middle;
}

/* Slideshow container */
.slideshow-container {
    max-width: 320px;
    position: relative;
    margin: auto;
}

/* Caption text */
.text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* The dots/bullets/indicators */
.dot {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active {
    background-color: #717171;
}

/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
    .text {
        font-size: 11px
    }
}

<h2>Automatic Slideshow</h2>
<p>Change image every 2 seconds:</p>

<div class="slideshow-container" data-cycle="2000">

    <div class="mySlides fade">
        <div class="numbertext">1 / 3</div>
        <img src="https://placeimg.com/320/240/animals">
        <div class="text">Caption Text</div>
    </div>

    <div class="mySlides fade">
        <div class="numbertext">2 / 3</div>
        <img src="https://placeimg.com/320/240/nature">
        <div class="text">Caption Two</div>
    </div>

    <div class="mySlides fade">
        <div class="numbertext">3 / 3</div>
        <img src="https://placeimg.com/320/240/people">
        <div class="text">Caption Three</div>
    </div>

</div>

<p>Change image every 3 seconds:</p>

<div class="slideshow-container" data-cycle="3000">

    <div class="mySlides fade">
        <div class="numbertext">1 / 2</div>
        <img src="https://placeimg.com/320/240/animals">
        <div class="text">Caption 1</div>
    </div>

    <div class="mySlides fade">
        <div class="numbertext">2 / 2</div>
        <img src="https://placeimg.com/320/240/nature">
        <div class="text">Caption 2</div>
    </div>

</div>

也在JSFiddle

这里最重要的是Java变量的作用域。我建议阅读JS Variables，而不是Googlejavascript scope variables，您可能会找到像this one或that one这样的文章。

这篇关于如何在一个页面上显示多个自动幻灯片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！