HTMLでスライドショー画像をランダム化する方法

Question

私は以下のHTMLコードを持ち、画像をランダム化したいと思います。それを達成する方法は？

コードの下には、コードがhtmlの一部であり、コードが実行されて画像が順番に表示されます。私はjavascripteをulterする方法を知らないし、画像をランダムに表示することができます。

ありがとうございました。うまくいけば誰かが助けてくれてありがとう。 ローレンス

<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 
    }