图片轮播JavaScript代码失效求助：内联/外部引入均无效果

阿华AIGC实验室

2026-5-15

解决图片轮播JavaScript不生效的问题

我帮你排查了代码，发现几个关键问题导致JS无法正常工作，咱们一步步来修复：

问题1：未匹配的HTML标签

你的代码里有一个多余的</section>闭合标签（在轮播容器的</div>之后），但前面并没有对应的<section>标签。这会导致浏览器解析DOM结构时出现混乱，JavaScript无法正确获取到轮播元素（比如.mySlides和.dot）。

问题2：可选检查项（避免后续问题）

确保图片路径resources/img_03.jpg、resources/img_01.jpg、resources/img_02.jpg是正确的，要和你的项目文件结构对应，不然图片加载不出来会影响轮播的视觉效果。
确认你的脚本没有被浏览器的安全策略（比如CSP）阻止，不过从你的内联脚本来看，只要是本地运行或者服务器配置正常，一般不会有问题。

修复后的完整代码

<!DOCTYPE html>
<html>
<head>
<style>
.mySlides {display:none}
/* Slideshow container */
.slideshow-container {
 max-width: 1000px;
 position: relative;
 margin: auto;
}
/* Next & previous buttons */
.prev, .next {
 cursor: pointer;
 position: absolute;
 top: 50%;
 width: auto;
 padding: 16px;
 margin-top: -22px;
 color: white;
 font-weight: bold;
 font-size: 18px;
 transition: 0.6s ease;
 border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
 right: 0;
 border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
 background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
 color: #f2f2f2;
 font-size: 15px;
 padding: 8px 12px;
 position: absolute;
 bottom: 8px;
 width: 100%;
 text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
 color: #f2f2f2;
 font-size: 12px;
 padding: 8px 12px;
 position: absolute;
 top: 0;
}
/* The dots/bullets/indicators */
.dot {
 cursor:pointer;
 height: 13px;
 width: 13px;
 margin: 0 2px;
 background-color: #bbb;
 border-radius: 50%;
 display: inline-block;
 transition: background-color 0.6s ease;
}
.active, .dot:hover {
 background-color: #717171;
}
/* Fading animation */
.fade {
 -webkit-animation-name: fade;
 -webkit-animation-duration: 1.5s;
 animation-name: fade;
 animation-duration: 1.5s;
}
@-webkit-keyframes fade {
 from {opacity: .4} to {opacity: 1}
}
@keyframes fade {
 from {opacity: .4} to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
 .prev, .next,.text {font-size: 11px}
}
</style>
</head>
<body>
<div class="slideshow-container">
 <div class="mySlides fade">
 <div class="numbertext">1 / 3</div>
 <img src="resources/img_03.jpg" style="width:100%">
 <div class="text">Caption Text</div>
 </div>
 <div class="mySlides fade">
 <div class="numbertext">2 / 3</div>
 <img src="resources/img_01.jpg" style="width:100%">
 <div class="text">Caption Two</div>
 </div>
 <div class="mySlides fade">
 <div class="numbertext">3 / 3</div>
 <img src="resources/img_02.jpg" style="width:100%">
 <div class="text">Caption Three</div>
 </div>
 <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
 <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>
<div style="text-align:center">
 <span class="dot" onclick="currentSlide(1)"></span>
 <span class="dot" onclick="currentSlide(2)"></span>
 <span class="dot" onclick="currentSlide(3)"></span>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
 showSlides(slideIndex += n);
}
function currentSlide(n) {
 showSlides(slideIndex = n);
}
function showSlides(n) {
 var i;
 var slides = document.getElementsByClassName("mySlides");
 var dots = document.getElementsByClassName("dot");
 if (n > slides.length) {slideIndex = 1}
 if (n < 1) {slideIndex = slides.length}
 for (i = 0; i < slides.length; i++) {
 slides[i].style.display = "none";
 }
 for (i = 0; i < dots.length; i++) {
 dots[i].className = dots[i].className.replace(" active", "");
 }
 slides[slideIndex-1].style.display = "block";
 dots[slideIndex-1].className += " active";
}
</script>
</body>
</html>