我的代码有问题；我正在尝试创建一个幻灯片，其中包含由for循环定义的许多元素。
幻灯片中出现的元素具有标题和图像；我注意到我总是得到最后一个元素，如果我点击箭头，我就无法更改图像。
CCD_ 1给了我一组元素，然后我从中执行for循环；而CCD_ 2给了我一个带有标题和id图像的单一元素。
有人能向我解释一下怎么做吗？
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("img");
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";
}
var outerXmlhttp = new XMLHttpRequest();
var url = "https://wjko5u6312.execute-api.us-east-2.amazonaws.com/articles";
outerXmlhttp.onreadystatechange = function() {
var innerXmlhttp;
if (this.readyState == 4 && this.status == 200) {
var allart = JSON.parse(this.responseText);
var container = document.getElementById("slideshow")
for (var i = 0, len = allart.Items.length; i < len; i++) {
id = allart.Items[i].id
var url1 = "https://wjko5u6312.execute-api.us-east-2.amazonaws.com/articles/" + id;
innerXmlhttp = new XMLHttpRequest();
innerXmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myArr = JSON.parse(this.responseText);
let div = document.createElement("div");
let divdot = document.createElement("div");
let img1 = document.createElement("img");
let title1 = document.createElement("p");
div.id = "img_fade";
divdot.id = "dot";
title1.id = "title1";
img1.id = "img1";
document.getElementById("title1").innerHTML = myArr.Item.title;
document.getElementById("img1").src = myArr.Item.image;
}
};
innerXmlhttp.open("GET", url1, true);
innerXmlhttp.send();
}
}
};
outerXmlhttp.open("GET", url, true);
outerXmlhttp.send();<body>
<p id="id"></p>
<div class="slideshow-container" id="slideshow">
<div class="img fade" id="img_fade">
<div class="numbertext">1 / 4</div>
<img id="img1" src onerror="this.onerror=null;" style="width:100%">
<div class="text" id="title1"></div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center" id="dot">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>
</body>我实际上还没有运行您的代码，但快速浏览一下，您的showSlides()函数似乎接受了一个索引n，但除了检查限制(1和slides数组的长度(之外，您从未实际使用此参数来更新slideIndex的值，这是唯一实际发送到此函数的变量。
换句话说，slideIndex实际上从未改变，并且所示的图像是由slideIndex而不是n确定的。当您使用全局变量来跟踪您在幻灯片中的位置时，您至少需要将url0设置为showSlides内的局部变量n的值(在这种情况下，最好在检查其限制之前(。