Django集成Bootstrap项目中jQuery无法正常工作求助

算力阿峰

2026-5-15

搞定Django+Bootstrap项目里jQuery Marquee失效的问题

Hey buddy, let's dig into why your marquee slider isn't working. Looking at your code, there are a couple of straightforward fixes to get this up and running:

1. 你漏了jQuery Marquee插件！

原生jQuery根本没有.marquee()这个方法——这个滚动效果是靠专门的jQuery Marquee插件实现的。你现在只引入了基础jQuery、Bootstrap和自己的script.js，但没加载这个核心插件，浏览器肯定会报错说找不到这个方法。

怎么修：
在你的script.js之前，加上这个插件的引入脚本：

{% load static %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- 新增：加载jQuery Marquee插件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.marquee/1.5.0/jquery.marquee.min.js"></script>
<script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/script.js' %}"></script>

2. 换掉过时的`window.load`事件

jQuery(window).load()早就被废弃啦，现在大家都用$(document).ready()（或者更简洁的$(function(){...})）。前者要等所有图片、样式表都加载完才执行，而我们只需要DOM结构就绪就能初始化插件，用后者更高效也更可靠。

修改你的script.js：

$(function() { // 等价于$(document).ready()
  $(".marquee").marquee({
    duration: 10 * $(".marquee").width(),
    duplicated: true,
    pauseOnHover: true
  });
});