1

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

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

http://jsfiddle.net/3WaWf/1/

以下是我尝试的：

<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>
4

4 回答 4

0

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

于 2013-09-12T20:10:01.120 回答
0

这些应该在<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 相同的位置

于 2013-09-12T20:15:23.083 回答
0

js 和 css 包含的正确部分也不是检查包含的正确路径，如果未找到，您将在浏览器控制台中发现 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/

于 2013-09-12T20:27:51.733 回答
0

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

于 2013-09-12T20:35:59.743 回答