j查询图像幻灯片不起作用

jQuery image slide not working?

本文关键字：不起作用 幻灯片 图像 查询      更新时间：2023-09-26

我是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>

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/

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

这些应该放在<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 必须位于根文件夹中，与索引的位置相同.html

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

相关文章：