Question

为了让我的JS滑块工作，我在这里缺少什么？我引用了我的网站文件夹中的js文件'js'文件夹。我正在使用http://materializecss.com/

中的一个js脚本

<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
  <script>
    $(document).ready(function() {
      $('.carousel').carousel();
    });
  </script>

  <div class="carousel carousel-slider center" data-indicators="true">
    <div class="carousel-fixed-item center">
      <a class="btn waves-effect white grey-text darken-text-2">button</a>
    </div>

    <div class="carousel-item red white-text" href="#one!">
      <h2>First Panel</h2>
      <p class="white-text">This is your first panel</p>
    </div>

    <div class="carousel-item amber white-text" href="#two!">
      <h2>Second Panel</h2>
      <p class="white-text">This is your second panel</p>
    </div>

    <div class="carousel-item green white-text" href="#three!">
      <h2>Third Panel</h2>
      <p class="white-text">This is your third panel</p>
    </div>

    <div class="carousel-item blue white-text" href="#four!">
      <h2>Fourth Panel</h2>
      <p class="white-text">This is your fourth panel</p>
    </div>
  </div>

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="js/materialize.min.js"></script>
</body>

</html>

Answer 1

您应该在使用之前包含您的jQuery库，所以：

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

应该出现在：

之前

$(document).ready(function(){
    $('.carousel').carousel();
});

在您的代码中。

希望这有帮助。

<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>

   BODY CONTENT ....

  <script type="text/javascript" src="js/materialize.min.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

  <script>
    $(document).ready(function() {
      $('.carousel').carousel();
    });
  </script>
</body>

</html>

Answer 2

在您加载jQuery库之前，您无法调用> x // value restriction > (x : int list) // works。所以把你的脚本放在最后，而不是开头。

＆＃13;

$(document).ready()

＆＃13;

Answer 3

除了重新组织脚本之外别忘了调用最后一个脚本函数，即运行旋转木马的人，使用具有图像或文本列表的类的正确名称（因为您在示例中调用了div类“carousel”并没有具有该名称的div类在我的情况下，我把“carousel-slider”放到了两者，div类和脚本的调用这将是仅使用文本

的示例

<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

</head>
<body>

   <div class="carousel-slider" data-indicators="true">
    <div class="carousel-fixed-item center">
      <a class="btn waves-effect white grey-text darken-text-2">button</a>
    </div>

    <div class="carousel-item red white-text" href="#one!">
      <h2>First Panel</h2>
      <p class="white-text">This is your first panel</p>
    </div>

    <div class="carousel-item amber white-text" href="#two!">
      <h2>Second Panel</h2>
      <p class="white-text">This is your second panel</p>
    </div>

    <div class="carousel-item green white-text" href="#three!">
      <h2>Third Panel</h2>
      <p class="white-text">This is your third panel</p>
    </div>

    <div class="carousel-item blue white-text" href="#four!">
      <h2>Fourth Panel</h2>
      <p class="white-text">This is your fourth panel</p>
    </div>
  </div>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script>


  $(document).ready(function(){
    $('.carousel-slider').carousel();
  });
</script>
</body>
</html>

我的html中缺少什么使javascript工作？

3 个答案: