页面刷新时如何实现图片随机加载？无需修改现有HTML结构

你现有代码的核心逻辑是通过localStorage存储轮播索引，每次顺序累加实现固定顺序加载，只需将顺序索引替换为随机生成的合法索引即可实现需求，无需修改HTML结构，也不需要手动新增图片资源。

调整后的完整JS代码 #

$(function() {
  $('.randomSlider ul.fader li').hide();
  // 合并css设置，写法更简洁
  $('.randomSlider ul.fader li').css({
    'position': 'absolute',
    'top': '0px',
    'left': '0px'
  });

  var max = $('.randomSlider ul.fader li').length;

  // 生成随机索引，已添加连续重复过滤逻辑
  function getRandomIndex() {
    let random = Math.floor(Math.random() * max);
    // 不需要避免连续重复可以删掉以下if判断块
    if (localStorage.slider && max > 1) {
      let lastIndex = parseInt(localStorage.slider, 10);
      while (random === lastIndex) {
        random = Math.floor(Math.random() * max);
      }
    }
    return random;
  }

  function showSlider() {
    let currentIndex = getRandomIndex();
    $('.randomSlider .fader').find('li:nth(' + currentIndex + ')').fadeIn();
    localStorage.slider = currentIndex;
  }

  showSlider();
});

核心调整点说明 #

• 移除了原有顺序累加的索引逻辑，改用Math.random()生成0到图片总数之间的随机整数作为展示索引
• 额外增加了连续重复校验逻辑，避免两次刷新出现同一张图，不需要该特性可以直接删除对应判断代码
• 完全复用现有DOM结构，自动识别渲染的li元素数量，适配动态新增的图片资源

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