Javascript Slide Showランダムシーケンス

画像がランダムな順序で表示されるように、次のコードで「Math.random」関数に収めようとしていますが、成功しません。変更されていないスライドショーのコードの下のとおりです。Javascript Slide Showランダムシーケンス

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<style> 
* {box-sizing:border-box} 
body {font-family: Verdana,sans-serif;} 
.mySlides {display:none} 

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

/* The dots/bullets/indicators */ 
.dot { 

height: 15px; 
width: 15px; 
margin: 0 2px; 
background-color: #bbb; 
border-radius: 50%; 
display: inline-block; 
transition: background-color 0.6s ease; 
} 

.active { 
background-color: #717171; 
} 

/* Fading animation */ 
.fade { 
-webkit-animation-name: fade; 
-webkit-animation-duration: 1.5s; 
animation-name: fade; 
animation-duration: 1.5s; 
} 

@-webkit-keyframes fade { 
from {opacity: .4} 
    to {opacity: 1} 
} 

@keyframes fade { 
from {opacity: .4} 
to {opacity: 1} 
} 

/* On smaller screens, decrease text size */ 
@media only screen and (max-width: 300px) { 
.text {font-size: 11px} 
} 
</style> 
</head> 
<body> 

<div class="slideshow-container"> 

<div class="mySlides fade"> 
<a href="https://www.one.com" target="_blank"> 
<img src="1.jpg" style="border-radius:3px;"> 
</a> 
</div> 

<div class="mySlides fade"> 
<a href="https://www.two.com" target="_blank"> 
<img src="2.jpg" style="border-radius:3px;"> 
</a> 
</div> 

<div class="mySlides fade"> 
<a href="https://www.three.com" target="_blank"> 
<img src="3.jpg" style="border-radius:3px;"> 
</a> 
</div> 

</div> 
<br> 

<div style="text-align:center"> 
<span class="dot"></span> 
<span class="dot"></span> 
<span class="dot"></span> 
</div> 

<script> 
var slideIndex = 0; 
showSlides(); 

function showSlides() { 
var i; 
var slides = document.getElementsByClassName("mySlides"); 
var dots = document.getElementsByClassName("dot"); 
for (i = 0; i < slides.length; i++) { 
    slides[i].style.display = "none"; 
} 
slideIndex++; 
if (slideIndex > slides.length) {slideIndex = 1}  
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"; 
setTimeout(showSlides, 1500); 
} 
</script>

がどのように私はこのループでMath.random機能を使用することができます（I = 0;私< slides.length; I ++）は、ランダムな順序で表示します。ありがとう

出典

2017-11-29 haroon

これまでに何を試みましたか？ – Kokodoko

いくつかの組み合わせが好きです：（i = 0; i haroon

スライドIDの配列を作成し、配列をシャッフルすることができます。その後、配列をループします。各スライドは1回だけ表示されますが、ランダムな順序で表示されます。

function shuffleArray(arr) { 
    arr.sort(() => (Math.random() - 0.5) 
} 

let ids = [0,1,2,3,4,5,6] 
shuffleArray(ids) 

for (let i = 0; i < ids.length; i++) { 
    let s = ids[i] 
    slides[s].style.display = "block" //etc 
}

出典

2017-11-29 14:51:34 Kokodoko

申し訳ありませんが、 – haroon

Javascript Slide Showランダムシーケンス

答えて

関連する問題