如何让我的JavaScript轮播图以随机顺序播放？

给你两种可行的实现方式，根据你的需求选就行：

方案1：避免连续重复同一张图片 #

这种方式简单直接，每次随机选一张，但会确保和当前显示的不是同一张，避免连续出现相同图片：

修改你的JavaScript代码如下：

// 替换原有的myIndex变量
var currentIndex = 0;
// 提前获取所有轮播元素，避免每次函数调用都重新查询
var slides = document.getElementsByClassName("thewellDiv");

carousel();

function carousel() {
    myTimeout = setTimeout(carousel, 400);

    // 隐藏所有轮播项
    for (let i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }

    // 生成随机索引，确保和当前显示的不同（图片数量大于1时生效）
    let randomIndex;
    do {
        randomIndex = Math.floor(Math.random() * slides.length);
    } while (randomIndex === currentIndex && slides.length > 1);

    // 更新当前索引并显示对应轮播项
    currentIndex = randomIndex;
    slides[currentIndex].style.display = "block";
}

function onMouseOver() {
    clearTimeout(myTimeout);
}

function onMouseOut() {
    myTimeout = setTimeout(carousel, 400);
}

方案2：轮完所有图片再重新随机（无重复轮播） #

如果希望一轮内所有图片都只出现一次，轮完一轮后再重新打乱顺序，可以维护一个随机索引队列：

// 提前获取所有轮播元素
var slides = document.getElementsByClassName("thewellDiv");
// 初始化随机索引队列
let slideQueue = getRandomQueue(slides.length);
let currentIndex = 0;

carousel();

// 生成打乱的索引队列（洗牌算法）
function getRandomQueue(length) {
    let queue = Array.from({length}, (_, i) => i);
    for (let i = queue.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [queue[i], queue[j]] = [queue[j], queue[i]];
    }
    return queue;
}

function carousel() {
    myTimeout = setTimeout(carousel, 400);

    // 隐藏所有轮播项
    for (let i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }

    // 显示队列中的当前图片
    slides[slideQueue[currentIndex]].style.display = "block";
    
    // 移动到下一个索引，队列用完就重新生成
    currentIndex++;
    if (currentIndex >= slideQueue.length) {
        slideQueue = getRandomQueue(slides.length);
        currentIndex = 0;
    }
}

function onMouseOver() {
    clearTimeout(myTimeout);
}

function onMouseOut() {
    myTimeout = setTimeout(carousel, 400);
}

额外优化建议 #

• 把鼠标事件绑定到容器thewellContainer上，不用每个img都单独绑定，更简洁：给容器标签加上onmouseover="onMouseOver()" onmouseout="onMouseOut()"，然后移除每个img上的事件属性。
• 提前查询轮播元素并保存到变量中，避免每次调用carousel都重新查询DOM，提升性能。

内容的提问来源于stack exchange，提问作者qwandered-rage