仍然是 JS 的新手，并陷入了一个小 slider 问题。我在一页上有 2 个简单的轮播 slider ，但只有其中一个可以工作。如果我禁用第二个，第一个可以正常工作，但不能同时工作。
我怀疑这与我的 Javascript 代码有关，但不知道要更改什么:
JS(上)和 HTLM(下):
// - - - - - BANNER SLIDER
<script>
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("bg-image-slide");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {
slideIndex = 1
}
x[slideIndex - 1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>
// - - - - - TESTIMONIAL SLIDER
<script>
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("testimonial");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {
slideIndex = 1
}
x[slideIndex - 1].style.display = "block";
setTimeout(carousel, 6500);
}
</script><!-- BANNER SLIDER -->
<div class="banner-slider">
<div class="bg-image-slide bg-slide-1"></div>
<div class="bg-image-slide bg-slide-2"></div>
<div class="bg-image-slide bg-slide-3"></div>
</div>
<!-- TESTIMONIAL SLIDER -->
<div id="testimonial-slider">
<div class="testimonial">
<p class="testimonial-review"> {{site.data.testimonials.review-1-en}} </p>
<h4 class="testimonial-client"> {{site.data.testimonials.name-1-en}} </h4>
<h5 class="testimonial-country">{{site.data.testimonials.country-1-en}}</h5>
</div>
<div class="testimonial">
<p class="testimonial-review"> {{site.data.testimonials.review-2-en}} </p>
<h4 class="testimonial-client"> {{site.data.testimonials.name-2-en}} </h4>
<h5 class="testimonial-country">{{site.data.testimonials.country-2-en}}</h5>
</div>
<div class="testimonial">
<p class="testimonial-review"> {{site.data.testimonials.review-3-en}} </p>
<h4 class="testimonial-client"> {{site.data.testimonials.name-3-en}} </h4>
<h5 class="testimonial-country">{{site.data.testimonials.country-3-en}}</h5>
</div>
</div>最佳答案
对于第二个轮播，您必须创建不同的函数和不同的 slipIndex 变量。
对于第一个轮播，我使用了轮播功能和slideIndex。
对于第二个轮播，我使用了carousel1函数和slideIndex1。
.display-container{
margin:20px;
border: 1px solid;
}<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<h2 class="w3-center">Manual Slideshow</h2>
<div class="display-container">
<div class="mySlides1" style="width:100%">Slide 1 </div>
<div class="mySlides1" style="width:100%">Slide 2</div>
</div>
<br><br>
<div class="display-container">
<div class="mySlides2" style="width:100%">Slide 3 </div>
<div class="mySlides2" style="width:100%">Slide 4</div>
</div>
<script>
var slideIndex = 1;
var slideIndex1 = 1;
carousel();
carousel1();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides1");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {
slideIndex = 1
}
x[slideIndex - 1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
function carousel1() {
var i;
var x = document.getElementsByClassName("mySlides2");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex1++;
if (slideIndex1 > x.length) {
slideIndex1 = 1
}
x[slideIndex1 - 1].style.display = "block";
setTimeout(carousel1, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>关于javascript - 一页上的 2 个轮播 slider 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51892733/