javascript - 如何使用 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:

在头部我放置:

<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 元素需要位于 the 之后(例如，在结束标记之前)，否则它将在浏览器解析之前运行。或者您可以将幻灯片 JS 代码从其他代码移至文档就绪处理程序内。

这来自用户:nnnnn

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