Question

我想解释为什么幻灯片显示不起作用。如果 userClick 为false，我会使用间隔来永久更改幻灯片。白色和方形按钮（由div组成）设置为调用两个函数; slideRight（）或 slideLeft（）和点击（）。但是，当单击按钮时，单击（）功能似乎不会根据页面顶部的数据更改变量。

<body>
    <div class="page-wrapper">
      <header>
        <div class="headContent">
          <h1 class="titleText">Slideshow</h1>
          <h2 class="subTitleText">A slideshow made with JavaScript.</h2>
          <p>userClick <span id="uc"></span></p>
        </div>
        <nav>
          <ul>
            <li>Home</li>
            <li>About</li>
            <li>Gallery</li>
          </ul>
        </nav>
      </header>
      <div class="body-wrapper">
        <h1 class="titleText">Slideshow</h1>
        <div id="slideshow">
          <div id="leftSlide" onclick="leftSlide(); clicked()"></div>
          <div id="rightSlide" onclick="rightSlide(); clicked()"></div>
        </div>
        <p>The image is not invoked by a tag, but invoked by the background property using Javascript.</p>
      </div>
      <footer>
        <p id="footerText">&copy; 2017 <br>Designed by JastineRay</p>
      </footer>
    </div>
    <script language="javascript">
      // Slide function

      var slide = ["minivan", "lifeinthecity", "sunsetbodyoflove"];
      var slideTo = 1;
      window.onload = getSlide();

      // Previous Image
      function leftSlide() {
        if (slideTo != 0) {
          slideTo = slideTo - 1;
        } else if (slideTo == 0) {
          slideTo = slide.length - 1;
        } else {
          alert('SLIDE ERROR');
        }
        getSlide();
      }

      // Next Image
      function rightSlide() {
        if (slideTo != (slide.length - 1)) {
          slideTo = slideTo + 1;
        } else if (slideTo == (slide.length - 1)) {
          slideTo = 0;
        } else {
          alert('SLIDE ERROR');
        }
        getSlide();
      }

        function getSlide() {
        imageURL = 'url(images/' + slide[slideTo] + '.jpg)';
        document.getElementById("slideshow").style.backgroundImage = imageURL;
      }

      // Interval Slideshow & Check if user clicked (timeout)

      var userClick = false;
      window.onload = slideInterval(5000);

      // Start Slideshow
      function slideInterval(interval) {
        while (userClick = false) {
          setInterval(function() {
            rightSlide();
          }, interval)
        }
      }

      // Stop Slideshow and start timeout
      function clicked() {
        userClick = true;
        setTimeout(function() {
          userClick = false;
          slideInterval();
        }, 2000)
      }

      window.onload = function() {
        setInterval(document.getElementById("uc").innerHTML = userClick), 100
      }
    </script>
  </body>

下面的CSS编码。

* {
  margin: 0;
  padding: 0;
}

.page-wrapper {
  width: 100%;
}

// Class Styling

.titleText {
  font-family: monospace;
  font-size: 40px;
}

.subTitleText {
  font-family: monospace;
  font-size: 20px;
  font-weight: normal;
}

// Header Styling

header {
  height: 500px;
}

.headContent {
  margin: 30px 7%;
}

// Navigation Styling

nav {
  overflow: hidden;
}

nav ul {
  background: black;
  background: linear-gradient(#595959, black);
  list-style-type: none;
  font-size: 0;
  padding-left: 13.33%;
  margin: 40px 0;
}

nav ul li {
  padding: 15px 20px;
  border-right: 1px solid #595959;
  border-left: 1px solid #595959;
  color: white;
  display: inline-block;
  font-size: 20px;
  font-family: sans-serif;
}

// Body Styling

.body-wrapper {

}

.body-wrapper > .titleText {
  text-align: center;
  font-size: 50px;
}

#slideshow {
  overflow: hidden;
  margin: 20px auto;
  border: 2px solid blue;
  height: 350px;
  max-width: 800px;
  background-size: cover;
  background-position: center;
  position: relative;
}

#leftSlide {
  position: absolute;
  left: 40px;
  top: 175px;
  background-color: white;
  height: 40px;
  width: 40px;
}

#rightSlide {
  position: absolute;
  left: 100px;
  top: 175px;
  background-color: white;
  height: 40px;
  width: 40px;
}

// Footer Styling

Answer 1

尝试将检查部分更改为：

  window.onload = function() {
    setInterval(function () {
        document.getElementById("uc").innerHTML = userClick;
    }, 100);
  }

setInterval的第一个参数必须是一个函数（可以调用的东西），而不是通用代码。

Javascript幻灯片功能不起作用

1 个答案: