如何使用 html、css 和 javascript 随机化滑块画廊中的图像？

Question

目前，图像幻灯片画廊允许通过单击箭头按钮查看上一张或下一张图片来浏览图像。

有没有办法让它在每次访问网站时加载随机图像？ 例如，网站不是总是从第 1 页开始，而是从第 2 页或第 3 页开始。

这是 HTML、CSS 和 javascript。

HTML

        <div class="slideshow-container">
          <!-- Full-width images with number and caption text -->
          <div class="mySlides fade">
            <div class="numbertext">1 / 3</div>
            <img src="images/art/38.jpg" style="width: 75%" />
            <div class="text">1</div>
          </div>

          <div class="mySlides fade">
            <div class="numbertext">2 / 3</div>
            <img src="images/art/43.jpg" style="width: 75%" />
            <div class="text">2</div>
          </div>

          <div class="mySlides fade">
            <div class="numbertext">3 / 3</div>
            <img src="images/art/39.jpg" style="width: 75%" />
            <div class="text">3</div>
          </div>

          <!-- Next and previous buttons -->
          <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
          <a class="next" onclick="plusSlides(1)">&#10095;</a>
        </div>

Javascript

      var slideIndex = 1;
      showSlides(slideIndex);

      // Next/previous controls
      function plusSlides(n) {
        showSlides((slideIndex += n));
      }

      // Thumbnail image controls
      function currentSlide(n) {
        showSlides((slideIndex = n));
      }

      function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("dot");
        if (n > slides.length) {
          slideIndex = 1;
        }
        if (n < 1) {
          slideIndex = slides.length;
        }
        for (i = 0; i < slides.length; i++) {
          slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
          dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += " active";
      }

CSS

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.prev {
  left: 0;
  border-radius: 3px 0 0 3px;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

Answer 1

您可以使用

var slideIndex = Math.floor(Math.random() * slides.length) + 1;

这将变量slideIndex分配给一个介于 1 和幻灯片数量之间的随机整数。 请注意，您必须将

var slides = document.getElementsByClassName("mySlides");

在此之前，为了它的工作。

或者您可以只用您拥有的元素数量替换slides.length ，但是每次添加或删除元素时都必须更新它。