javascript - 如何在 HTML 中随机化幻灯片图像

Question

我有下面的 HTML 代码，想要随机化图像。如何实现？

下面的代码是html的一部分，代码运行是为了按顺序显示图像。我不知道如何修改 javascripte，并且希望图像可以随机显示。

感谢您的关心，希望有人能提供帮助。 劳伦斯

<div class="slideshow-container">

<div class="mySlides fade">
  <img src="http://i.dailymail.co.uk/i/pix/2017/03/01/14/3DD766C300000578-4271496-image-a-39_1488378897470.jpg" style="width:100%">
</div>

<div class="mySlides fade">
  <img src="https://hips.hearstapps.com/roa.h-cdn.co/assets/16/30/1469467513-01-2016-aston-martin-db9-gt.jpg" style="width:100%">
</div>

<div class="mySlides fade">
  <img src="https://article.images.consumerreports.org/prod/content/dam/CRO%20Images%202017/Magazine-Articles/April/Google-Auto-Profile-images-2017/PRF-811" style="width:100%">
</div>

<div class="mySlides fade">
  <img src="http://www.lexus.com/byl2014/pub-share/images/series/lc.png" style="width:100%">
</div>

</div>
<br>


<script>

var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    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"; 
    setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>

Answer 1

您可以生成一个随机数来选择随机图像:

function showSlides() {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none"; 
        }
        slideIndex++;
        if (slideIndex> slides.length) {slideIndex = 1} 
        var rand = Math.floor((Math.random() * slides.length));
        slides[rand].style.display = "block"; 
        setTimeout(showSlides, 2000); // Change image every 2 seconds
    }