如何使用JavaScript和jQuery正确格式化.js文件？

Question

我是第一次在我的网站中实现JavaScript和jQuery，并且在如何格式化代码方面遇到了麻烦。我分别使用的代码可以单独工作，但是当我将以下代码组合到一个.js文档中时，代码的第二部分(幻灯片)就不能工作了。我做错了什么？编辑:这是幻灯片放映不起作用。

谢谢。

这是针对一个元素的：

$(document).ready(function() {
$('#nav-icon4').click(function() {
$(this).toggleClass('open');
$(".menu").slideToggle();
  });
});

这是同一页上的另一个元素：

var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,2000);

function nextSlide() {
slides[currentSlide].className = 'slide';
currentSlide = (currentSlide+1)%slides.length;
slides[currentSlide].className = 'slide showing';
} 

HTML：

在head部分，我放了：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="scripts/scripts.js"></script>

正文：

<ul id="slides">
   <li class="slide showing"><img src="images/run1.jpg" alt="run" class="show"/></li>
<li class="slide"><img src="images/oregonpin.jpg" alt="oregon pin on map" class="show" /></li>
<li class="slide"><img src="images/shortswim.jpg" alt="swim" class="show" /></li>
<li class="slide"><img src="images/cycle1.jpg" alt="bike" class="show" /></li>
<li class="slide"><img src="images/run2.jpg" alt="run" class="show"/></li>
<li class="slide"><img src="images/run3.jpg" alt="run" class="show"/></li>
<li class="slide"><img src="images/cycle2.jpg" alt="bike" class="show"/></li>
<li class="slide"><img src="images/swim1.jpg" alt="swim" class="show"/></li>
  </ul>

CSS：

#slides {
position: relative;
height: 300px;
padding: 0px;
margin: 0px;
list-style-type: none;
}
.slide {
position: absolute;
left: 0px;
top: 0px;
width: 90%;
height: 100%;
opacity: 0;
z-index: 1;

-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}

.showing {
opacity: 1;
z-index: -1;
}
.slide {
font-size: 40px;
padding: 40px;
box-sizing: border-box;
background: #333;
color: #fff;
}
.show {
height: 80%;
width: 100%;
} 

Answer 1

scripts/scripts.js元素需要在之后(例如，恰好在结束标记之前)，否则它将在浏览器解析之前运行。或者，您可以将幻灯片JS代码从其他代码移动到文档就绪处理程序中。

这来自用户: nnnnn

我将幻灯片代码放在一个新文件中，并将其链接到底部。

Answer 2

尝试将第二个代码片段的代码放在紧随其后

$(document).ready(function() {

第一个代码段的。