JavaScript新手求助：实现Snackbar图片与文本循环功能

嘿，作为JavaScript新手遇到这种循环展示的问题太正常了，我来帮你把代码补全，搞定这个需求！你的现有代码已经搭好了文本和图片赋值的基础框架，但缺少循环状态的持久化和自动触发循环的机制，下面是完整的解决方案：

完整代码实现 #

// 把索引变量y放在函数外部，避免每次调用都重置为0，保存当前展示位置
let y = 0;

function myFunction() {
  const array1 = ["Wygraj", "przegraj", "Wygraj figę z makiem", "z pasternakiem"];
  const array2 = ["img/omni_not.png", "img/notify_rainbow.png", "img/notify_fisheye.jpg", "img/notify_square.jpg"];
  
  // 更新Snackbar的文本和图片
  document.getElementById("notify_text").innerHTML = array1[y];
  document.getElementById("notify_photo").src = array2[y];
  
  // 显示Snackbar（假设你的CSS里有"show"类控制显示状态）
  const snackbar = document.getElementById("snackbar");
  snackbar.className = "show";
  
  // 3秒后隐藏Snackbar，接着更新索引并触发下一次循环
  setTimeout(() => {
    // 移除show类隐藏Snackbar
    snackbar.className = snackbar.className.replace("show", "");
    // 用取模运算实现循环：索引到数组末尾后自动回到0
    y = (y + 1) % array1.length;
    // 隐藏后等待1秒，再次调用函数开启下一轮展示（间隔时间可自行调整）
    setTimeout(myFunction, 1000);
  }, 3000); // 控制Snackbar的显示时长，这里是3秒
}

// 初始化调用，启动循环
myFunction();

关键逻辑解释 #

• 持久化索引状态：把y放在函数外部作为全局变量，这样每次调用myFunction时不会重置为0，能记住当前展示的位置。如果不想污染全局作用域，也可以用闭包封装这个变量（后面会给示例）。
• 循环索引控制：(y + 1) % array1.length是实现循环的核心——当y增长到数组最后一个索引时，取模运算会让它自动回到0，实现无限循环展示。
• Snackbar显隐控制：通过添加/移除show类来控制Snackbar的显示和隐藏，需要你的CSS配合这个类的样式（比如设置可见性、过渡动画）。
• 定时循环触发：用两层setTimeout，第一层控制Snackbar的显示时长，第二层控制隐藏后到下一次显示的间隔，让整个循环自动运行。

额外优化建议 #

• 用闭包封装索引变量，避免全局污染：

const startSnackbarLoop = (() => {
  let y = 0;
  return function() {
    const array1 = ["Wygraj", "przegraj", "Wygraj figę z makiem", "z pasternakiem"];
    const array2 = ["img/omni_not.png", "img/notify_rainbow.png", "img/notify_fisheye.jpg", "img/notify_square.jpg"];
    
    document.getElementById("notify_text").innerHTML = array1[y];
    document.getElementById("notify_photo").src = array2[y];
    
    const snackbar = document.getElementById("snackbar");
    snackbar.className = "show";
    
    setTimeout(() => {
      snackbar.className = snackbar.className.replace("show", "");
      y = (y + 1) % array1.length;
      setTimeout(startSnackbarLoop, 1000);
    }, 3000);
  }
})();

startSnackbarLoop();

• 配合基础CSS样式让Snackbar有过渡效果：

#snackbar {
  visibility: hidden;
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 16px 24px;
  border-radius: 4px;
  z-index: 1000;
}

#snackbar.show {
  visibility: visible;
  animation: fadeInOut 3s ease-in-out;
}

@keyframes fadeInOut {
  0% { opacity: 0; bottom: 0; }
  10% { opacity: 1; bottom: 30px; }
  90% { opacity: 1; bottom: 30px; }
  100% { opacity: 0; bottom: 0; }
}

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