Question

我是jQuery的新手，并尝试使用它来进行练习。我使用在slidesjs.com上提供的源代码在我的本地网站上插入了一个jQuery图像滑块，但它不起作用。

另外，我喜欢让它更有条理，所以如果我将所有jQuery分成新文件，如何将我的jQuery页面与html链接？

以下是我的尝试：

<html>
    <header>
      <script src="http://code.jquery.com/jquery-latest.min.js"></script>
      <script src="jquery.slides.min.js"></script>
      <link rel="stylesheet" type="text/css" href="style2.css"></header>

        <style>
        /* Prevents slides from flashing */
        #slides {
          display:none;
        }
      </style>

      <script>
        $(function(){
          $("#slides").slidesjs({
            width: 940,
            height: 528
          });
        });
      </script>

    <body>
        <div class="nav-bar">
            <h1 class="logo" style="vertical-align:middle">LogoHere</h1>

            <ul class="nav-menu">
                <li><a href="index.html" class="action">Action</a></li>
                <li><a href="about.html" class="about">Who we are</a></li>
                <li><a href="blog.html" class="blog">Blog</a></li>
                <li><a href="services.html" class="services">Services</a></li>
                <li><a href="contact.html" class="contact">Get in touch</a></li>
            </ul>

            <div id="slides">
                <img src="hkslide1.jpg">
                <img src="hkslide2.jpeg">
                <img src="hkslide3.jpg">
            </div>
        </div>

Answer 1

确保jquery.slides.min.js与主页位于同一目录中，并且要将JQuery代码分开，只需将其放在单独的.js文件中，就可以在页面上引用它，如下所示：where你会放下代码。

Answer 2

这些标签应介于<head>和</head>代码之间，而不是<header>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.slides.min.js"></script>
<link rel="stylesheet" type="text/css" href="style2.css">

修改

<!doctype html>

<html>

<head>

  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="jquery.slides.min.js"></script>
  <link rel="stylesheet" href="style2.css" media="screen">

  <style>
    /* Prevents slides from flashing */
    #slides {
      display:none;
    }
  </style>

</head>

<body>

    <div class="nav-bar">

      <h1 class="logo" style="vertical-align:middle">LogoHere</h1>

      <ul class="nav-menu">
          <li><a href="index.html" class="action">Action</a></li>
          <li><a href="about.html" class="about">Who we are</a></li>
          <li><a href="blog.html" class="blog">Blog</a></li>
          <li><a href="services.html" class="services">Services</a></li>
          <li><a href="contact.html" class="contact">Get in touch</a></li>
      </ul>

      <div id="slides">
          <img src="hkslide1.jpg">
          <img src="hkslide2.jpeg">
          <img src="hkslide3.jpg">
      </div>

    </div>

<!-- SCRIPTS -- If you're putting scripts in HTML, put them below this line -->

  <script>
    $(function(){
      $("#slides").slidesjs({
        width: 940,
        height: 528
      });
    });
  </script>

</body>

</html>

在此示例中， jquery.slides.min.js 和 style2.css 必须位于根文件夹中，与index.html相同的位置

Answer 3

js和css include的正确部分也不会检查包含的正确路径，如果找不到，则会在浏览器控制台中找到404错误。

代码：

<head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="jquery.slides.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style2.css">
</head>

如果设置正确，演示代码可以正常工作。

演示：http://jsfiddle.net/IrvinDominin/tzPE2/

Answer 4

可能需要推迟您的代码，以便在加载元素后执行。尝试在页脚中添加js（将样式表保留在头部）并尝试一下。

jQuery图像幻灯片无法正常工作？

4 个答案: