Question

我在将幻灯片放入我的网站时遇到了问题。我在同一页面上需要多个幻灯片，这导致了滚动等多个问题。我终于找到了一个几乎完美的解决方案，但是指标不会改变颜色以反映当前的幻灯片。

var w3 = {};
w3.slideshow = function (sel, ms, func) {
  var i, ss, x = w3.getElements(sel), l = x.length;
  ss = {};
  ss.current = 1;
  ss.x = x;
  ss.ondisplaychange = func;
  if (!isNaN(ms) || ms == 0) {
    ss.milliseconds = ms;
  } else {
    ss.milliseconds = 1000;
  }
  ss.start = function() {
    ss.display(ss.current)
    if (ss.ondisplaychange) {ss.ondisplaychange();}
    if (ss.milliseconds > 0) {
      window.clearTimeout(ss.timeout);
      ss.timeout = window.setTimeout(ss.next, ss.milliseconds);
    }
  };
  ss.next = function() {
    ss.current += 1;
    if (ss.current > ss.x.length) {ss.current = 1;}
    ss.start();
  };
  ss.previous = function() {
    ss.current -= 1;
    if (ss.current < 1) {ss.current = ss.x.length;}
    ss.start();
  };
  ss.display = function (n) {
    w3.styleElements(ss.x, "display", "none");
    w3.styleElement(ss.x[n - 1], "display", "block");
  }
  ss.start();
  return ss;
};

<html>
<script src="w3.js"></script>
<body>
<div id="2" class="w3-row-padding w3-light-grey w3-padding-64 w3-container">
	 <div class="w3-content">
			<div class="w3-content w3-display-container w3-center">
			
		  <div class = "Slide2 w3-animate-opacity">
      <h1> Slide Content </h1>
		  </div>
		  <!-- Second slide App Development -->
		  <div class = "Slide2 w3-animate-opacity">
      <h1> Slide Content </h1>
		  </div>
		  <!-- Third slide App Development -->
		  <div class = "Slide2 w3-animate-opacity">
      <h1> Slide Content </h1>
		  </div>
		  <!-- Fourth slide App Development -->
		  <div class = "Slide2 w3-animate-opacity">
      <h1> Slide Content </h1>
		  </div>
		  <div class="w3-center w3-container w3-section w3-large w3-text-grey" style="width:100%">
			<span class="w3-left w3-hover-text-blue fa fa-arrow-left" onclick="myShow2 .previous()"></span>
			<span class="w3-right w3-hover-text-blue fa fa-arrow-right" onclick="myShow2 .next()"></span>
			<span class="fa fa-circle demo w3-hover-text-blue w3-transparent" onclick="myShow2 .display(1)"></span>
			<span class="fa fa-circle demo w3-hover-text-blue w3-transparent" onclick="myShow2 .display(2)"></span>
			<span class="fa fa-circle demo w3-hover-text-blue w3-transparent" onclick="myShow2 .display(3)"></span>
			<span class="fa fa-circle demo w3-hover-text-blue w3-transparent" onclick="myShow2 .display(4)"></span>
		  </div>
		
		</div>
  </div>
  <script> myShow2 = w3.slideshow(".Slide2", 0); </script>
</div>
</body>
</html>

所以代码运行良好并做我想要的事情，除非我不确定如何使圆形指示器变为蓝色以反映当前幻灯片。我尝试了完全不同的方法，除了这是唯一允许在同一页面上进行多个幻灯片放映的方法。有些人可以向我解释一下，如果点击时圈子保持蓝色，点击另一个圈子时还原，我会怎么做？

Answer 1

我找到了解决问题的方法。首先，我添加了一个额外的变量来调用函数<script> myShow4 = w3.slideshow(".Slide4", 0, "demo4"); </script> ＆＃34; demo4＆＃34;将用于查找指示点。 <span class="fa fa-circle demo4 w3-hover-text-blue w3-transparent" onclick="myShow4 .display(4)"></span>每个指标都有特定的类。

`ss.display = function (n) {
    ss.current = n;
    w3.styleElements(ss.x, "display", "none");
    w3.styleElement(ss.x[n - 1], "display", "block");
    ss.indicator(demo);
  }
  ss.indicator = function(n) {
        var dots = document.getElementsByClassName(n);
        for (i = 0; i < dots.length; i++) {
         dots[i].className = dots[i].className.replace(" w3-text-blue", "");
      }
      x[ss.current-1].style.display = "block"; 
      dots[ss.current-1].className += " w3-text-blue";
  }`

这是JS文件中的新代码。点击显示功能被调用，我编辑了该功能，也调用了指示功能，将当前幻灯片相关点更改为蓝色，同时将其余部分更改为空或之前的状态。这个解决方案对我有用，在被调用的函数中添加了另一个函数。

如何使我的幻灯片指示器使用当前代码更改其样式？

1 个答案: