2

我在使用 Javascript Coin Slider 时遇到问题（伟大的下载来自/：本研讨会）。我附上2个屏幕截图。一个是在 chrome 中工作的文件，第二个是同时托管在我的服务器上的同一个文件。这是我第一次真正玩弄 JQuery，所以我不确定是否有什么我忽略了？我已经详尽地查看了我所有的相关链接，以确保它们都是语法和语义正确的。

请帮忙！

在此处输入图像描述

在此处输入图像描述

这是HTML / Js：

<div id="coin-slider">
<a href="team/index.html"><img src="img/jq/1.jpg" /></a>
<a href="history/index.html"><img src="img/jq/2.jpg" /></a>
<a href="planning/index.html"><img src="img/jq/3.jpg" /></a>
<a href="fun/index.html"><img src="img/jq/4.jpg" /></a>
<a href="girls/index.html"><img src="img/jq/5.jpg" /></a>
<a href="tour/index.html"><img src="img/jq/6.jpg" /></a>
  <script type="text/javascript">
    $(document).ready(function() {
      $('#coin-slider').coinslider({ width:959, height:325, navigation: false, delay: 4000, spw:10, sph:6, sdelay: 50, effect: 'rain' });
        });
      </script>
</div>

......我的头叫：

<!-- JQuery Coin Slider image display and transition inclusions -->
  <script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript" src="js/coin-slider.min.js"></script>
4

1 回答 1

3

如果您检查错误控制台，您将看到以下错误：Uncaught TypeError: Object [object Object] has no method 'coinslider'

这表明硬币滑块脚本尚未加载。如果您检查源代码，您可以看到 javascript 文件确实正确加载（文件）。

这会导致您假设它没有在正确的时间加载文件。

再次检查您的来源表明您没有将硬币滑块初始化包装到document.ready调用中，因此调用出现故障。

解决方案：将 coinslider 初始化封装到一个document.ready函数中，以便 jQuery 和其他所有内容都可用，您会发现它们都将开始工作。

额外说明：它在本地工作但不在服务器上工作的原因是在本地加载文件几乎没有延迟。您不必等待它通过 Internet 下载，因此它基本上按照您在源代码中提供的顺序运行。例如（简化一点以帮助解释）：

我们包含 2 个文件：jQuery.js 和 coinslider.js，我们按顺序包含它们（首先是 jQuery）。

我们的 coinslider.js 文件引用了 jQuery，需要 jQuery 加载后才能执行。

为了这个示例，我们假设两个 js 文件位于同一服务器上，但是 jQuery.js 文件比 coinslider.js 文件大很多。由于该文件大小，jQuery.js 文件的下载时间比coinslider.js 文件要长得多（实际上，它不仅取决于文件大小，还取决于服务器在世界上的位置 - 延迟 - 以及您和服务器之间的互联网速度）。

假设 2 个下载请求（1 个用于 jQuery.js，1 个用于 coinslider.js）基本上同时发送（时间 0 秒）。jQuery.js 需要 5 秒下载，coinslider.js 需要 2 秒下载。

在时间 1 秒：两个文件仍在下载中。

在时间 2 秒：coinslider.js 已完成下载并被执行。

在 5 秒的时间：jQuery.js 已经完成下载并被执行。

因为没有任何代码告诉浏览器现在立即执行coinslider.js，所以它在2 秒的时间运行并且因为jQuery.js 还没有被执行而失败。

通过在 coinslider.js 初始化周围包装一个document.ready函数，我们告诉浏览器在执行之前等待一切准备就绪，因此它将等到 5 秒标记，届时 jQuery 将可用并且一切都会好起来的。

然后可以发生快乐有趣的聚会时间:)

编辑代码 看起来包含脚本存在一些语法问题（您不能<script>在其他标签中包含<script>标签。

我不记得原始版本是什么样的，但现在它正在改变......

<!-- JQuery Coin Slider image display and transition inclusions -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"><script type="text/javascript">
    $(document).ready(function() {
      $('#coin-slider').coinslider({ width:959, height:325, navigation: false, delay: 4000, spw:10, sph:6, sdelay: 50, effect: 'rain' });
        });
      </script></script>
  <script type="text/javascript" src="js/coin-slider.min.js"><script type="text/javascript">
    $(document).ready(function() {
      $('#coin-slider').coinslider({ width:959, height:325, navigation: false, delay: 4000, spw:10, sph:6, sdelay: 50, effect: 'rain' });
        });
      </script></script>

到：

<!-- JQuery Coin Slider image display and transition inclusions -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/coin-slider.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('#coin-slider').coinslider({ width:959, height:325, navigation: false, delay: 4000, spw:10, sph:6, sdelay: 50, effect: 'rain' });
});
</script>

此外，在您的源代码的第 93 行，您在<div id="coin-slider">

<script type="text/javascript">
        $(document).ready(function() {
          $('#coin-slider').coinslider({ width:959, height:325, navigation: false, delay: 4000, spw:10, sph:6, sdelay: 50, effect: 'rain' });
        });
</script>

删除它。

于 2012-04-27T01:51:22.287 回答