如何随机化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
    }