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>

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

1 个答案: