自动幻灯片播放故障

Question

我是一个非常业余的Web开发人员，希望构建我的第一个网站。香港专业教育学院处理了一些html和CSS，但我还没有碰过javascript。我希望为自己的首页制作自动幻灯片放映，因此我在https://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/上搜索了一些代码，并在其中找到了一个不错的边秀设计（我应该注意，我目前正在使用glitch.com进行编码）。所以我做了一个.js文件，因为以前没有，所以将代码复制到各自的文件中。一切正常，但我怀疑Javascript会发生。我认为我在某处缺少一些javascript起始代码，或者它在最新的jquery更新中过时了（该代码来自2013年），无论哪种方式，任何帮助都值得赞赏

此处为代码：

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);

#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <script src="script.js"></script>
    <title>test area</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="  style.css"> 
  
</head>

  <body>
  
  <div id="slideshow">
   <div>
     <img src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
   </div>
   <div>
     <img src="//farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
   </div>
   <div>
     Pretty cool eh? This slide is proof the content can be anything.
   </div>
  </div>
</body>

</html>

谢谢