Question

我尝试使用ken wheelers光滑滑块，尝试后似乎没有任何作用，仅显示一些静态内容，通过在线论坛，我发现问题是未加载jquery，所以我如何加载jquery从下面的代码？预先感谢！

<html>

<head>
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.11/slick.css" />
</head>

<body>

  <div class="fade">
    <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
    <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
    <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
  </div>

  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="C:/Users/Joachim-Mpanda/Desktop/script.js"></script>
  <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.3.11/slick.min.js"></script>

  <script type="text/javascript">
    $(document).load(function() {
      $('.fade').slick({
        dots: true,
        infinite: true,
        speed: 700,
        autoplay: true,
        autoplaySpeed: 2000,
        arrows: false,
        slidesToShow: 1,
        slidesToScroll: 1
      });

    });
  </script>
</body>

</html>

Answer 1

尝试使用$(document).ready代替$(document).load

$(document).ready(function(){       
    $('.fade').slick({
        dots: true,
        infinite: true,
        speed: 700,
        autoplay:true,
        autoplaySpeed: 2000,
        arrows:false,
        slidesToShow: 1,
        slidesToScroll: 1
    });
});

<html>
   <head>
      <title>My Now Amazing Webpage</title>
      <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.11/slick.css"/>
   </head>
   <body>
      <div class="fade">
         <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
         <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
         <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
      </div>
      <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
      <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
      <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.3.11/slick.min.js"></script>
   </body>
</html>

如何从下面的代码片段加载jquery？

1 个答案: