Javascript 如何在幻灯片中更改徽章的颜色？_Javascript_Css

Javascript 如何在幻灯片中更改徽章的颜色？

javascript css

Javascript 如何在幻灯片中更改徽章的颜色？,javascript,css,Javascript,Css,我想根据当前幻灯片更改/显示点的颜色。在我的代码中，幻灯片根据按下哪个点而改变，但问题是点的颜色没有改变。我试着把我注释过的代码放在下面的代码中，但它不起作用。代码如下： `<!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"

我想根据当前幻灯片更改/显示点的颜色。在我的代码中，幻灯片根据按下哪个点而改变，但问题是点的颜色没有改变。我试着把我注释过的代码放在下面的代码中，但它不起作用。代码如下：

`<!DOCTYPE html>
 <html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}
</style>
<body>

<div class="w3-container">
  <h2>Slideshow Indicators</h2>
  <p>An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.</p>
</div>

<div class="w3-content w3-display-container" style="max-width:800px">
  <img class="mySlides1" src="img_nature_wide.jpg" style="width:100%">
  <img class="mySlides1" src="img_snow_wide.jpg" style="width:100%">
  <img class="mySlides1" src="img_mountains_wide.jpg" style="width:100%">
  <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1,0)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2,0)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3,0)"></span>
  </div>
</div>

<script>
var slideIndex = [1,1];

var slideId = ["mySlides1", "mySlides2"];
showDivs(1, 0);


function plusDivs(n, no) {
  showDivs(slideIndex[no] += n, no);
}

function currentDiv(n, no) {
  showDivs(slideIndex[no] = n, no);
}

function showDivs(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]);
  if (n > x.length) {slideIndex[no] = 1}
  if (n < 1) {slideIndex[no] = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  x[slideIndex[no]-1].style.display = "block"; 
  dots[slideIndex[no]-1].className += "w3-white";
}

</script>

</body>
</html> 
`

`
W3.CSS
.mySlides{display:none}
.w3左、.w3右、.w3徽章{光标：指针}
.w3徽章{高度：13px；宽度：13px；填充：0}
幻灯片指示器
使用按钮指示幻灯片中有多少幻灯片以及用户当前正在查看的幻灯片的示例
var slideIndex=[1,1]；
var slided=[“mySlides1”、“mySlides2”]；
showDivs（1,0）；
函数plusDivs（n，no）{
showDivs（slideIndex[no]+=n，no）；
}
函数currentDiv（n，否）{
showDivs（slideIndex[no]=n，no）；
}
函数showDivs（n，no）{
var i；
var x=document.getElementsByClassName（slideId[no]）；
如果（n>x.length）{slideIndex[no]=1}
如果（n<1）{slideIndex[no]=x.length}
对于（i=0；i

您需要添加一个空间，以便使用js添加2个以上的类，否则它将作为一个类：

dots[slideIndex[no]-1].className += " w3-white";

用于添加或删除类

dots[slideIndex[no]-1]。类列表。添加（'w3-white'）

您需要接受答案才能解决此帖子