Django模板配合JS实现随机图片加载与30秒自动轮换功能

1. Django模板语法在JS中的使用规则 #

Django的{% %}、{{ }}等模板语法仅能在被Django服务渲染的HTML模板文件内生效，如果你把JS代码写在独立的静态.js文件中，无法直接识别模板语法，将相关JS逻辑嵌入到模板的<script>标签中即可正常使用。

2. 方案1：通过Django动态传递图片路径（无需手动写路径） #

后端视图配置 #

你可以在视图中提前读取所有画廊图片的路径，传递到模板上下文：

# views.py
from django.shortcuts import render
from .models import GalleryImage # 假设你已经定义了存储画廊图片的模型

def gallery_page(request):
    # 批量获取所有图片的访问路径
    image_urls = [item.img_field.url for item in GalleryImage.objects.all()]
    return render(request, 'gallery.html', context={'image_urls': image_urls})

模板端代码实现 #

<!-- gallery.html 模板文件 -->
<div id="gallery-container"></div>

<style>
/* 可选：添加图片淡入过渡效果 */
.fade-in {
  animation: fadeIn 0.8s ease-in;
  max-width: 100%;
  height: auto;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
</style>

<script>
// 从Django注入的json数据中读取图片路径列表
{{ image_urls|json_script:"gallery_image_list" }}
const images = JSON.parse(document.getElementById('gallery_image_list').textContent);

// 随机加载图片的函数
function loadRandomGalleryImg() {
  const randomIndex = Math.floor(Math.random() * images.length);
  const randomImgUrl = images[randomIndex];
  document.getElementById('gallery-container').innerHTML = `<img class="fade-in" src="${randomImgUrl}" alt="艺术画廊作品">`;
}

// 页面加载/刷新时首次执行
window.addEventListener('load', loadRandomGalleryImg);
// 每30秒自动切换一次图片
setInterval(loadRandomGalleryImg, 30 * 1000);
</script>

3. 方案2：纯JS实现（无需修改Django后端） #

如果你已经提前整理好了所有图片的文件名，也可以直接在模板JS中拼接静态资源路径，无需修改后端逻辑：

<div id="gallery-container"></div>

<style>
/* 可选过渡效果同方案1 */
.fade-in {
  animation: fadeIn 0.8s ease-in;
  max-width: 100%;
  height: auto;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
</style>

<script>
// 替换为你自己的图片文件名列表
const imageNames = ['banner-1.jpg', 'banner-2.jpg', 'banner-3.jpg', 'banner-4.jpg'];
// 通过Django static标签获取静态资源基础路径，无需手动写全路径
const imgBasePath = "{% static 'images/gallery/' %}"; // 替换为你实际的静态图片存放目录

function loadRandomGalleryImg() {
  const randomIndex = Math.floor(Math.random() * imageNames.length);
  const imgFullPath = imgBasePath + imageNames[randomIndex];
  document.getElementById('gallery-container').innerHTML = `<img class="fade-in" src="${imgFullPath}" alt="艺术画廊作品">`;
}

window.addEventListener('load', loadRandomGalleryImg);
setInterval(loadRandomGalleryImg, 30 * 1000);
</script>

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