首页上述代码中JavaScript 写在哪

上述代码中JavaScript 写在哪

时间: 2024-04-16 13:24:43 浏览: 81

JavaScript 代码可以写在 HTML 文件的 `<script>` 标签内，可以放在 `<head>` 标签中或者 `<body>` 标签的底部。以下是两个示例： 1. 在 `<head>` 标签中引入外部的 JavaScript 文件： ```html <!DOCTYPE html> <html> <head> <title>图片轮播</title> <link rel="stylesheet" type="text/css" href="styles.css"> <script src="script.js"></script> </head> <body> <div class="slideshow-container"> <img src="image1.jpg" class="slide"> <img src="image2.jpg" class="slide"> <img src="image3.jpg" class="slide"> </div> </body> </html> ``` 在这个示例中，`<script src="script.js"></script>` 表示引入名为 `script.js` 的外部 JavaScript 文件。 2. 直接在 HTML 文件中嵌入 JavaScript 代码： ```html <!DOCTYPE html> <html> <head> <title>图片轮播</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="slideshow-container"> <img src="image1.jpg" class="slide"> <img src="image2.jpg" class="slide"> <img src="image3.jpg" class="slide"> </div> <script> var slides = document.getElementsByClassName("slide"); var currentSlide = 0; function showNextSlide() { slides[currentSlide].classList.remove("active"); currentSlide = (currentSlide + 1) % slides.length; slides[currentSlide].classList.add("active"); } setInterval(showNextSlide, 3000); </script> </body> </html> ``` 在这个示例中，`<script>...</script>` 标签内嵌入了 JavaScript 代码。不论你选择哪种方式，都可以实现图片轮播效果。选择将 JavaScript 代码放在外部文件中的好处是可以更好地组织代码，并使 HTML 文件更简洁。

阅读全文