如何实现网页背景轮播每次加载时随机排序且支持增减图片？

核心实现思路 #

无需修改原有轮播插件源码，仅通过初始化前的预处理即可满足需求：

• 动态生成图片路径数组，后续增删图片仅需修改总数量配置，无需批量调整代码
• 对图片数组做随机打乱处理，保证每次页面加载的轮播顺序完全独立无规律

代码修改步骤 #

步骤1：修改页面初始化脚本 #

将你原有<script>标签内的$(document).ready逻辑替换为以下代码：

$(document).ready(function() {
    // 总图片数量配置，后续增删图片仅需修改此值即可
    const TOTAL_IMAGES = 61

    // Fisher-Yates 标准洗牌算法，保证数组随机无偏差
    function shuffle(arr) {
        let i = arr.length, j, temp
        while (--i > 0) {
            j = Math.floor(Math.random() * (i + 1))
            temp = arr[j]
            arr[j] = arr[i]
            arr[i] = temp
        }
        return arr
    }

    // 自动生成所有图片路径
    const originImageList = Array.from({length: TOTAL_IMAGES}, (_, index) => `pics/${index + 1}.jpg`)
    // 打乱图片顺序
    const randomImageList = shuffle(originImageList)

    // 初始化轮播插件，传入打乱后的图片数组
    $("body").backgroundSlideshow({
        onBeforeTransition: function(index) {
            console.log("before transition", index)
        },
        onAfterTransition: function(index) {
            console.log("after transition", index)
        },
        transitionDuration: 3000,
        fixed: true,
        images: randomImageList
    })
})

步骤2（可选）：实现轮播过程完全随机（允许重复出现图片） #

上述方案默认会遍历完所有61张图片后再从头开始循环，不会出现重复图片。如果需要每次切换都完全随机、允许重复出现同一图片，可修改jquery-background-slideshow.js里的nextImage函数：
找到以下代码：

nextImageIndex++
if (nextImageIndex >= config.images.length) {
    nextImageIndex = 0
}

替换为：

// 随机生成下一张图片索引，添加判断避免连续两张图片相同
do {
    nextImageIndex = Math.floor(Math.random() * config.images.length)
} while (nextImageIndex === currentImageIndex)

说明 #

• 后续新增/删除图片时，只要保证图片命名按数字.jpg的规则连续排列，仅需修改TOTAL_IMAGES的值即可，无需其他代码调整
• 洗牌算法保证每次页面加载的轮播顺序完全不同，符合要求的随机效果

内容的提问来源于stack exchange，提问作者PJs