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()来阻止重新加载页面。< / p>

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

一旦您停止离开页面，每次处理点击时，您的代码都会设置一个新的 interval ，为避免这种情况，您可以在末尾使用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>

Answer 2

每个选择功能都不需要setInterval。

根据changeSlide函数，如下更改currentSlide。

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

Answer 3

选中此选项（运行下面的代码段），我修复了一些语法错误：

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

var currentSlide = 1;

var myVar = setInterval(function(){
return changeSlide()
}
,1000);

function changeSlide() {
    if (currentSlide == 1) {
      currentSlide++;
      document.getElementById("slide1IMG").src = 'https://upload.wikimedia.org/wikipedia/commons/e/e1/FullMoon2010.jpg';
      document.getElementById("left").style.opacity =1;
      document.getElementById("right").style.opacity =.5;
     } else if (currentSlide == 2) {
      currentSlide++;
      document.getElementById("slide1IMG").src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Stellar_%289460796504%29.jpg/1024px-Stellar_%289460796504%29.jpg';
      document.getElementById("middle").style.opacity =1;
      document.getElementById("left").style.opacity =.5;
     } else if(currentSlide==3){
       currentSlide = 1;
      document.getElementById("slide1IMG").src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Pillars_of_creation_2014_HST_WFC3-UVIS_full-res_denoised.jpg/1024px-Pillars_of_creation_2014_HST_WFC3-UVIS_full-res_denoised.jpg';
      document.getElementById("right").style.opacity =1;
      document.getElementById("middle").style.opacity =.5;
    }
}

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

<div id="slideshow">
            <div id="slide1">
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Stellar_%289460796504%29.jpg/1024px-Stellar_%289460796504%29.jpg" 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>

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

3 个答案: