Javascript jQuery图像幻灯片不工作？_Javascript_Jquery_Html_Css

Javascript jQuery图像幻灯片不工作？

javascript jquery html css

Javascript jQuery图像幻灯片不工作？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我对jQuery还不熟悉，并尝试着利用它进行一些练习。我已经使用slidesjs.com提供的源代码在我的本地网站上插入了一个jQuery图像滑块，但它不起作用此外，我喜欢使它更具组织性，因此，如果要将所有jQuery分离到一个新文件中，如何将jQuery页面与html链接以下是我的尝试： <html> <header> <script src="http://code.jquery.com/jquery-latest.min.js">

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


/*防止幻灯片闪烁*/
#幻灯片{
显示：无；
}
$（函数（）{
$（“#幻灯片”）.slidesjs({
宽度：940，
身高：528
});
});
登录

确保jquery.slides.min.js与主页在同一目录下，要分离jquery代码，只需将其放在一个单独的.js文件中，并在页面上这样引用它：您应该将代码放在哪里。

这些应该放在

和

标记之间，而不是

编辑


/*防止幻灯片闪烁*/
#幻灯片{
显示：无；
}
登录







$（函数（）{
$（“#幻灯片”）.slidesjs({
宽度：940，
身高：528
});
});

在本例中，jquery.slides.min.js和style2.css必须位于您的根文件夹中，与索引位置相同。html

js和css include的正确部分也不是检查include的正确路径，如果没有找到，您将在浏览器控制台中发现404个错误

代码：

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

演示：

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

您应该向我们提供一个显示相关代码的示例。关于组织HTML，创建新的JS文档，并将HTML文档中的所有脚本复制/粘贴到新的JS文档中，并给它起一个名称，例如，在HTML文档中调用脚本，例如

@mdesdev，这会包括在标记上复制吗？不适用于样式制作style.css文档，并在那里复制/粘贴内嵌样式，当然，在这之后，请从HTML文档中删除内联样式。@mdesdev我认为当我分离脚本时，它无法识别脚本，是否需要在script.js文件中添加任何类型的头？我只有$（function（）{（“#slides”）.slidesjs（{width:940，height:528}）；}）；你应该把它下载到你的本地机器上，或者引用你复制代码的网站上的文件。这正是我所做的。你能告诉我你将如何在头部做链接参考吗？它不像我那样工作..下面的评论是我如何创建链接ref code.jquery.com/jquery latest.min.js“>

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

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