时间戳

首页 > 解决方案 > 如何在一页上获得多个自动幻灯片？

html - 如何在一页上获得多个自动幻灯片？

问题描述

我目前正在关注关于在一页上获取多个幻灯片的 W3 HTML/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 并将代码移动到不同的位置，但没有任何效果。

标签： htmlcssslideshow

解决方案

只需进行一些更改，您就可以在那里。我还添加了一个更改延迟的选项，看看：

/* 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

这里最重要的是 Javascript 变量的范围。我建议阅读JS 变量，而不是 google javascript 范围变量，您可能会找到类似这篇或那篇的文章。

推荐阅读