Javascript 幻灯片按钮仅显示 1 张幻灯片

Question

我正在为我的网站主页制作幻灯片。它可以工作，自动在 1-3 之间切换，但是 onclick 函数有一些问题。每个按钮都会将我带到第一张幻灯片，而不是第二张或第三张，只是第一张。感谢任何帮助，请并谢谢!

document.getElementById("left").style.opacity =1;

var currentSlide = 2;

var myVar = setInterval(changeSlide, 5000);

function changeSlide() {
    if (currentSlide == 1) {
      currentSlide++;
      document.getElementById("slide1IMG").src = 'http://theskindealer.com/img/slide1.png';

      document.getElementById("left").style.opacity =1;
      document.getElementById("right").style.opacity =.5;

     } else if (currentSlide == 2) {
      currentSlide++;
      document.getElementById("slide1IMG").src = 'http://theskindealer.com/img/slide2.png';

      document.getElementById("middle").style.opacity =1;
      document.getElementById("left").style.opacity =.5;

     } else {
      --currentSlide;
      --currentSlide;
      document.getElementById("slide1IMG").src = 'http://theskindealer.com/img/slide3.png';

      document.getElementById("right").style.opacity =1;
      document.getElementById("middle").style.opacity =.5;

    }
}

function firstSlide() {
  currentSlide = 1;
  myVar = setInterval(changeSlide, 5000);
}
function secondSlide() {
  currentSlide = 2;
  myVar = setInterval(changeSlide, 5000);
}
function thirdSlide() {
  currentSlide = 3;
  myVar = setInterval(changeSlide, 5000);
}

          <div id="slideshow">
            <div id="slide1">
              <img src="/img/slide1.png" alt="" style="width:100%;height:100%;position:absolute;" id="slide1IMG">
            </div>
            <div id="selectors">
              <a href="" onclick="firstSlide()">
                <div  id="left">
                </div>
              </a>
              <a href="" onclick="secondSlide()">
                <div  id="middle">
                </div>
              </a>
              <a href="" onclick="thirdSlide()">
                <div  id="right">
                </div>
              </a>
            </div>
          </div>

Answer 1

您正在使用链接<a>标签，为了处理您的点击，每次您点击其中一个标签时，页面都会重新加载，在页面重新加载时，它将显示第一张幻灯片。这是 href="" 的预期行为.

最简单的解决方案是更改您的 <a> <button> 的标签标签，不过您也可以捕获 event并使用event.preventDefault()停止页面重新加载。

<button onclick="firstSlide()">
    ...
</button>
<button onclick="secondSlide()">
    ...
</button>
<button onclick="thirdSlide()">
    ...
</button>

一旦您停止离开页面，您的代码将在每次处理点击时设置一个新的间隔，为避免这种情况，您可以使用 setTimeout()在 changeSlide() 末尾，而不是间隔，或者清除点击处理程序上的间隔

function firstSlide() {

  // Change the current slide
  currentSlide = 1; 
  changeSlide();

  // Reset the interval
  clearInterval(myVar);
  myVar = setInterval(changeSlide, 5000);

}

我可能会重命名 myVar到一些明确表示它是间隔的东西，例如 refreshSlideInterval .

您还可以更改 changeSlide 中的条件使用严格比较

if (currentSlide == 1) {...}

到

if (currentSlide === 1) {...}

因为您知道您正在使用整数。

示例片段

const content = document.getElementById("content");

let currentSlide = 2;
let slideCountDown = setTimeout(changeSlide, 3000);

function changeSlide() {

  // Clear the timeout
  clearTimeout(slideCountDown);

  if (currentSlide === 1) {

    currentSlide = 2;

    content.innerText = 1;


  } else if (currentSlide === 2) {

    currentSlide = 3;

    content.innerText = 2;

  } else {

    currentSlide = 1;

    content.innerText = 3;

  }

  // Reset the timeout
  slideCountDown = setTimeout(changeSlide, 3000);
}

function firstSlide() {
  currentSlide = 1;
  changeSlide();
}
function secondSlide() {
  currentSlide = 2;
  changeSlide();
}
function thirdSlide() {
  currentSlide = 3;
  changeSlide();
}

#container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#content {
  font-size: 5rem;
  padding: 2rem;
}

#buttons {
  display: flex;
  flex-direction: row;
}

<div id="container">

  <div id="content">1</div>

  <div id="buttons">

    <button onclick="firstSlide()">
      First
    </button>
    <button onclick="secondSlide()">
      Second
    </button>
    <button onclick="thirdSlide()">
      Third
    </button>

  </div>

</div>