基于对象数组中元素数量的 Div 和轮播

Question

I have to create a carousel (so with the dots useful for scrolling the images, Next/previous buttons, number text) with the appropriate divs based on the number of elements in the array.我必须根据数组中的元素数量创建一个带有适当 div 的轮播（因此使用用于滚动图像的点、下一个/上一个按钮、数字文本）。

 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"; } function myFunction1() { var xmlhttp = new XMLHttpRequest(); var url = "https://wjko5e2643.execute-api.us-east-2.amazonaws.com/book/1"; xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var myArr = JSON.parse(this.responseText); var id = myArr.Item.id; document.getElementById("img1").src = myArr.Item.image; var id = myArr.Item.id; document.getElementById("title1").innerHTML = `<a href="books.html?id=${id}">${myArr.Item.title}</a>`; } }; xmlhttp.open("GET", url, true); xmlhttp.send(); } function myFunction2() { var xmlhttp = new XMLHttpRequest(); var url = "https://wjko5e2643.execute-api.us-east-2.amazonaws.com/book/2"; xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var myArr = JSON.parse(this.responseText); var id = myArr.Item.id; document.getElementById("img2").src = myArr.Item.image; var id = myArr.Item.id; document.getElementById("title2").innerHTML = `<a href="books.html?id=${id}">${myArr.Item.title}</a>`; } }; xmlhttp.open("GET", url, true); xmlhttp.send(); }

 * { box-sizing: border-box } body { font-family: Verdana, sans-serif; margin: 0 }.img { display: none } img { vertical-align: middle; } /* 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; user-select: none; } /* 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: 50px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/2 etc) */.numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */.dot { cursor: pointer; height: 15px; width: 15px; 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 } }

 <,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1"> </head> <body> <div class="slideshow-container"> <div class="img fade"> <div class="numbertext">1 / 2</div> <img id="img1" src onerror="this;onerror=null. this;src=myFunction1():" style="width.100%"> <div class="text" id="title1" onclick="myFunction1()"></div> </div> <div class="img fade"> <div class="numbertext">2 / 2</div> <img id="img2" src onerror="this;onerror=null. this;src=myFunction2():" style="width;100%"> <div class="text" id="title2" onclick="myFunction2()"></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> </div> </body> </html>

The following example refers to two images;以下示例涉及两个图像； so the numbertext must automatically update based on the number of elements in the array and so the various elements that compose it and therefore have only one "dynamic" div.因此 numbertext 必须根据数组中元素的数量以及组成它的各种元素自动更新，因此只有一个“动态”div。

Can anyone kindly help me?任何人都可以帮助我吗？

Answer 1

You can create element with javascript.您可以使用 javascript 创建元素。 To do this, use the document.createElement([TagName]) method and then append these to exiting element using the element.append([Element]) method.为此，请使用document.createElement([TagName])方法，然后使用 append 将它们添加到使用element.append([Element])方法的现有元素中。 So if showContainer is the .slideshow-container element and dotContainer the div with all the dots in it, you would get something like因此，如果showContainer是.slideshow-container元素，而dotContainer是包含所有点的 div，您会得到类似

for (let i = 0; i < myArr.length; i++) {
  let div1 = document.createElement(div);
  div1.property1 = ...;
  div1.property2 = ...;
  showContainer.append(div1);
  let img = document.createElement(img);
  img.property1 = ...;
  img.property2 = ...;
  dotContainer.append(img);
}

基于对象数组中元素数量的 Div 和轮播

问题描述

1 个解决方案

解决方案1
0 2022-01-11 13:15:22

基于对象数组中元素数量的 Div 和轮播

问题描述

1 个解决方案

解决方案1 0 2022-01-11 13:15:22

解决方案1
0 2022-01-11 13:15:22