[英]How to randomise the order of image slider
I have a image slider code which is working good.我有一个运行良好的图像滑块代码。 But I need to randomise the order of the pics so NOT everytime pic1 is shown first, pic2 shown second and than pic3 shown third.
但我需要随机化图片的顺序,所以不是每次首先显示 pic1,显示第二个 pic2,然后显示第三个 pic3。 I want to randomise the order of the pics so evertytime page is load, pics to have different order.
我想随机化图片的顺序,以便每次加载页面时,图片具有不同的顺序。 And I need help with that.
我需要这方面的帮助。 Here is my code:
这是我的代码:
<img class="mySlides" src="pic1.jpg">
<img class="mySlides" src="pic2.jpg">
<img class="mySlides" src="pic3.jpg">
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>
Change the order of elements in-place may help you.就地更改元素的顺序可能会对您有所帮助。
let index = 0; function randomise_list() { const list = document.querySelector("#slider"); for (let i = list.children.length; i >= 0; i--) { list.appendChild(list.children[Math.random() * i | 0]); } } function run_carousel() { const slides = document.querySelectorAll(".slide"); for (let i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } index++; if (index > slides.length) index = 1; slides[index - 1].style.display = "block"; setTimeout(run_carousel, 2000); // Change image every 2 seconds } randomise_list(); run_carousel();
<div id="slider"> <img class="slide" src="https://via.placeholder.com/50x50/333333/cccccc?text=1"> <img class="slide" src="https://via.placeholder.com/50x50/333333/cccccc?text=2"> <img class="slide" src="https://via.placeholder.com/50x50/333333/cccccc?text=3"> </div>
Using Math.random() like it is used here :像这里使用的那样使用 Math.random() :
<img class="mySlides" src="pic1.jpg" />
<img class="mySlides" src="pic2.jpg" />
<img class="mySlides" src="pic3.jpg" />
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex = getRandomInt(0, x.length - 1);
x[myIndex].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.