时间戳

首页 > 解决方案 > 在同一页面上添加多个 javascript 图像滑块

javascript - 在同一页面上添加多个 javascript 图像滑块

问题描述

我想要使​​用 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)">&#10094;</a>
    <a class="next" onclick="controlSlide(1)">&#10095;</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)">&#10094;</a>
    <a class="next" onclick="controlSlide(1)">&#10095;</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";
}

标签： javascripthtmlcss

解决方案

问题是您一次选择所有幻灯片，使用 document.getElementsByClassName("slides")。

您想更改 JS 方法以使用环绕元素

<div class="container slider">

然后选择这些并将这些传递给 controlSlide 表单 showSlides。未测试：

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";
}

推荐阅读