我想使用JavaScript在同一页面上使用同一个类名的多个图像滑块。我已经完成了一个图像滑块。
问题是当我使用多个图像滑块时,它无法正常工作。我尝试使用childNodes也无法正常工作。我怎么解决这个问题?
而且我还尝试为该图像滑块制作滑动动画(左右)。
如果您需要更多说明,请告诉我。
我已经给出了下面的代码;
的HTML
<div class="container slider">
<div class="slides">
<img src="images-/b3.jpg">
</div>
<div class="slides">
<img src="images-/b2.jpg">
</div>
<div class="slides">
<img src="images-/b1.jpg">
</div>
<a class="prev" onclick="controlSlide(-1)">❮</a>
<a class="next" onclick="controlSlide(1)">❯</a>
</div>
<div class="container slider">
<div class="slides">
<img src="images-/b3.jpg">
</div>
<div class="slides">
<img src="images-/b2.jpg">
</div>
<div class="slides">
<img src="images-/b1.jpg">
</div>
<a class="prev" onclick="controlSlide(-1)">❮</a>
<a class="next" onclick="controlSlide(1)">❯</a>
</div>
的CSS
.slides{
position: relative;
display:none;
}
img{
width: 100%;
vertical-align:middle;
}
.container
{
max-width: 100%;
position: relative;
margin: auto;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
color: black;
font-size: 20px;
}
.prev{
left: 2%;
}
.next{
right: 2%;
}
.prev:hover, .next:hover {
background-color: #f1f1f1;
text-decoration: none;
color: black;
}
JAVASCRIPT
var slides = document.getElementsByClassName("slides");
var position=[1,-1];
var slideIndex=0;
showSlides();
function showSlides() {
controlSlide(position[0]);
setTimeout(showSlides,3000);
}
function controlSlide(position) {
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex +=position;
if (slideIndex>slides.length) {
slideIndex = 1;
}
else if(slideIndex<=0){
slideIndex=slides.length;
}
slides[slideIndex-1].style.display= "block";
}
最佳答案
问题是您一次选择了所有带有document.getElementsByClassName(“ slides”)的幻灯片。
您想要更改JS方法以使用sorrounding元素
<div class="container slider">
然后选择并将eseese传递给showSlides形式的controlSlide。
未经测试:
var sliders = document.getElementsByClassName("slider");
var position=[1,-1];
var slideIndex=0;
sliders.forEach(function(slider){
showSlides(slider);
})
function showSlides(slider) {
let slides = slider.childNodes;
controlSlide(slides, position[0]);
setTimeout(showSlides,3000);
}
function controlSlide(slides, position) {
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex +=position;
if (slideIndex>slides.length) {
slideIndex = 1;
}
else if(slideIndex<=0){
slideIndex=slides.length;
}
slides[slideIndex-1].style.display= "block";
}