我有一个运行良好的图像滑块代码。但是我需要将图片的顺序随机化,因此并不是每次都会显示pic1,第二是显示pic2,而不是第三是pic3。我想随机化图片的顺序,以便每时每刻页面加载,图片具有不同的顺序。我需要帮助。这是我的代码:
<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>
答案 0 :(得分:3)
就地更改元素的顺序可能会对您有所帮助。
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>
答案 1 :(得分:2)
像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>