如何在javascript幻灯片中更改幻灯片时更改背景颜色？

Question

我有一个JavaScript幻灯片演示，其中我试图更改每个图像的单击背景色，并为每个图像分配特定的颜色。

我是从研究解决方案中找到此代码的，但似乎无法使其工作

我尝试过的

function changeBackground(color) {
document.body.style.background = color;
}

window.addEventListener("load",function() { changeBackground('red'); 
});

<div class="" onclick="document.body.style.backgroundColor = 'green';">

有没有人有什么建议？

我的密码

var slideIndex = 1;
var indexes = document.querySelectorAll(".numbertext span");
var slides = document.getElementsByClassName("mySlides");
indexes[1].innerHTML = slides.length;

showSlides(slideIndex);


function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
if (n > slides.length) {
    slideIndex = 1
}
if (n < 1) {
    slideIndex = slides.length
}
indexes[0].innerHTML = slideIndex;
for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
}
  slides[slideIndex - 1].style.display = "block";
}


<div class="slideshow-container">

<div class="mySlides fade" id="red">
  <div class="image">
    <img src="https://static1.squarespace.com/static/5a24d00449fc2b2179f0b620/t/5c7118acc830251242312b94/1550915797860/web+7.jpg?format=2500w" onclick="plusSlides(1)">
  </div>
</div>

<div class="mySlides fade" id="blue">
  <div class="image">
    <img src="https://static1.squarespace.com/static/5a24d00449fc2b2179f0b620/5c7116541905f442e8f008e0/5c7124951905f442e8f048fd/1550918837321/web+3.jpg?format=1000w" onclick="plusSlides(1)">
  </div>
</div>

<div class="mySlides fade" id="green">
  <div class="image">
    <img src="https://static1.squarespace.com/static/5a24d00449fc2b2179f0b620/t/5c711846ec212dd3a55665b8/1550915727165/web+5.jpg?format=2500w" onclick="plusSlides(1)">
  </div>
</div>

<div class="nextprevious">
  <a class="prev" onclick="plusSlides(-1)">Previous</a>

  <a class="next" onclick="plusSlides(1)">Next</a>
  <div class="numbertext">(<span>3</span> / <span>3</span>)</div>
</div>

  </div>
</div>

Answer 1

变更功能

function plusSlides(n) {
  showSlides(slideIndex += n);
  document.body.style.backgroundColor= ['green','red','blue'][slideIndex%3] ;
}

 var slideIndex = 1; var indexes = document.querySelectorAll(".numbertext span"); var slides = document.getElementsByClassName("mySlides"); indexes[1].innerHTML = slides.length; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); document.body.style.backgroundColor= ['green','red','blue'][slideIndex%3] ; } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; if (n > slides.length) { slideIndex = 1 } if (n < 1) { slideIndex = slides.length } indexes[0].innerHTML = slideIndex; for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slides[slideIndex - 1].style.display = "block"; } 

 img { width: 100% } 

 <div class="slideshow-container"> <div class="mySlides fade" id="red"> <div class="image"> <img src="https://static1.squarespace.com/static/5a24d00449fc2b2179f0b620/t/5c7118acc830251242312b94/1550915797860/web+7.jpg?format=2500w" onclick="plusSlides(1)"> </div> </div> <div class="mySlides fade" id="blue"> <div class="image"> <img src="https://static1.squarespace.com/static/5a24d00449fc2b2179f0b620/5c7116541905f442e8f008e0/5c7124951905f442e8f048fd/1550918837321/web+3.jpg?format=1000w" onclick="plusSlides(1)"> </div> </div> <div class="mySlides fade" id="green"> <div class="image"> <img src="https://static1.squarespace.com/static/5a24d00449fc2b2179f0b620/t/5c711846ec212dd3a55665b8/1550915727165/web+5.jpg?format=2500w" onclick="plusSlides(1)"> </div> </div> <div class="nextprevious"> <a class="prev" onclick="plusSlides(-1)">Previous</a> <a class="next" onclick="plusSlides(1)">Next</a> <div class="numbertext">(<span>3</span> / <span>3</span>)</div> </div> </div> </div>