輪播/幻燈片不適用於 for 循環
[英]Carousel/slideshow doesn't work with for loop
問題描述
我的代碼有問題； 我正在嘗試使用 for 循環定義的許多元素創建幻燈片。
幻燈片中的元素有標題和圖像； 我注意到我總是得到最后一個元素，如果我單擊箭頭，我將無法更改圖像。
url給了我一組元素，然后我從中執行 for 循環； 而url1通過 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>
1 個解決方案
解決方案1
0 2022-01-19 16:28:24
我實際上並沒有運行您的代碼，但快速瀏覽一下，您的showSlides() function 似乎接受索引n ，但除了檢查限制（1和slides數組的長度）之外，您從未真正使用過它參數來更新slideIndex的值——這是唯一實際發送到此 function 的變量。
換句話說， slideIndex實際上永遠不會改變，並且顯示的圖像是由slideIndex決定的，而不是n 。 當您使用全局變量來跟蹤您在幻燈片中的位置時，您至少需要將 slideIndex 設置為slideIndex中的局部變量n的showSlides （在這種情況下最好在檢查其限制之前）。
幻燈片不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.