如何实现基于数据库数据的自动循环切换图形脚本？

一、优化数据获取与处理 #

先简化PHP查询逻辑，只获取需要的字段并直接按顺序排序，同时返回关联数组，避免后续JS依赖索引位置：

require('require/db/db.php');
$data = date('Y-m-d');
// 仅查询所需字段，同时直接按queue排序，减少前端处理步骤
$stmt_take_date = $db->prepare("SELECT tmp, queue, time FROM upload WHERE screen = 1 AND end_date >= ? ORDER BY queue ASC");
$stmt_take_date->execute([$data]);
// 用关联数组返回，JS中可直接通过键名访问字段，更易维护
$row_date = $stmt_take_date->fetchAll(PDO::FETCH_ASSOC);

前端JS直接生成标准化的播放队列，无需手动排序和索引映射：

const arraydata = <?php echo json_encode($row_date); ?>;
// 转换为包含路径和毫秒级时长的播放队列
const playQueue = arraydata.map(item => ({
  path: item.tmp,
  duration: parseInt(item.time) * 1000 // 转成毫秒单位，适配setTimeout
}));

二、实现动态时长切换与循环播放 #

在页面中添加用于显示图片的元素，再编写核心切换逻辑：

<!-- 页面中添加图片展示容器 -->
<img id="display-image" alt="循环展示图片" style="width: 100%; height: auto;" />

let currentIndex = 0;
const imageElement = document.getElementById('display-image');

function switchImage() {
  // 加载当前索引对应的图片
  const currentItem = playQueue[currentIndex];
  imageElement.src = currentItem.path;

  // 更新索引，到达队列末尾后自动回到开头，实现无缝循环
  currentIndex = (currentIndex + 1) % playQueue.length;

  // 根据当前图片的配置时长，设置下一次切换的定时
  setTimeout(switchImage, currentItem.duration);
}

// 启动自动播放流程
switchImage();

关键说明 #

• 用(currentIndex + 1) % playQueue.length实现循环，无需额外判断队列边界
• 每次切换的定时时长完全依赖当前图片的配置，满足动态时长需求
• 采用关联数组访问字段，避免数据库字段顺序变化导致的代码错误，提升可维护性

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