如何隨機化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
    }