javascript - 带有手动控件的 slider 不会自动播放 - 可能是 setInterval 行为的问题？

标签 javascript html css

我正在开发一个使用超时自动切换幻灯片的纯 JavaScript slider 。就此而言，一切都很好。

但是，当我尝试添加控制按钮时，它们不起作用。相反，它会等到页面设置为切换(由超时定义)，然后再继续。

这可能是什么原因造成的，我该如何解决？我曾尝试在按下按钮时使用 clearTimeout() 方法(在尝试更改幻灯片之前)，但无济于事。

下面是我的代码:

document.body.onload = () => {
  var items = document.getElementsByClassName('item');
  var nextButton = document.getElementById('next');
  var prevButton = document.getElementById('prev');
  var currentSlide = function() {
    for (var j = 0; j < items.length; j++) {
      if (items[j].className === "item active") {
        return j;
      }
    }
  }


  function slideShow(currentslideinner) {
    if (currentslideinner == undefined) {
      currentslideinner = 0;
    } else {
      clearInterval(abc);
    }
    var abc = setInterval(function() {
      items[currentslideinner].classList.remove("active");
      currentslideinner++;
      if (currentslideinner > items.length - 1) {
        currentslideinner = 0;
      }
      console.log(currentslideinner);
      items[currentslideinner].classList.add("active");
    }, 4000);


  }

  slideShow();

  nextButton.addEventListener('click', function() {
    let currentSlide1 = currentSlide();
    if (currentSlide1 < items.length - 1) {
      items[currentSlide1].classList.remove("active");
      items[currentSlide1 + 1].classList.add("active");
      slideShow(currentSlide1 + 1);
    }

  });

  prevButton.addEventListener('click', function() {
    let currentSlide1 = currentSlide();
    if (currentSlide1 > 0) {
      items[currentSlide1].classList.remove("active");
      items[currentSlide1 - 1].classList.add("active");
      slideShow(currentSlide1 - 1);

    }
  });
}
*,
body {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100%;
  max-width: 1170px;
  margin: 0 auto;
}

h1 {
  text-align: center;
}

#carousel {
  margin-top: 20px;
  width: 100%;
  height: auto;
  min-height: 400px;
  display: block;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.item {
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
}

.item.active {
  display: block;
  animation: fadesIn 2000ms forwards;
  -webkit-animation: fadesIn 2000ms forwards;
}

@keyframes fadesIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.item div.carouselContent {
  position: absolute;
  font-family: 'Courier New', Courier, monospace;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  padding: 50px;
  top: 50%;
  transform: translateY(-50%)
}

.item div.carouselContent .title {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 24px;
  width: 100%;
  text-align: center;
}

.item div.carouselContent .description {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  width: 100%;
  text-align: center;
}

#item1 {
  background-color: aquamarine;
}

#item2 {
  background-color: bisque;
}

#item3 {
  background-color: brown;
}

#item4 {
  background-color: blanchedalmond;
}

#next {
  position: absolute;
  top: 50%;
  z-index: 2;
  right: 0px;
  transform: translateY(-50%);
}

#prev {
  position: absolute;
  top: 50%;
  z-index: 2;
  left: 0px;
  transform: translateY(-50%);
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Awesome Carousel</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
      <h1>Awesome Carousel</h1>
      <div id="carousel">
        <div id="next" class="fas fa-arrow-circle-right fa-3x"></div>
        <div id="prev" class="fas fa-arrow-circle-left fa-3x"></div>
        <div id="item1" class="item active">
          <div class="carouselContent">
            <div class="title">Lorem ipsum 1</div>
            <div class="description">Lorem ipsum dolor sit amet consectetur, adipisicing
              elit. Quasi non possimus libero, ea quas magnam odio quidem fugiat porro
              in! Maxime laboriosam corporis voluptatum totam enim voluptates aliquid!
              Vero, aliquid!
            </div>
          </div>
        </div>
        <div id="item2" class="item">
          <div class="carouselContent">
            <div class="title">Lorem ipsum 2</div>
            <div class="description">Lorem ipsum dolor sit amet consectetur, adipisicing
              elit. Quasi non possimus libero, ea quas magnam odio quidem fugiat porro
              in! Maxime laboriosam corporis voluptatum totam enim voluptates aliquid!
              Vero, aliquid!
            </div>
          </div>
        </div>
        <div id="item3" class="item ">
          <div class="carouselContent">
            <div class="title">Lorem ipsum 3</div>
            <div class="description">Lorem ipsum dolor sit amet consectetur, adipisicing
              elit. Quasi non possimus libero, ea quas magnam odio quidem fugiat porro
              in! Maxime laboriosam corporis voluptatum totam enim voluptates aliquid!
              Vero, aliquid!
            </div>
          </div>
        </div>
        <div id="item4" class="item">
          <div class="carouselContent">
            <div class="title">Lorem ipsum 4</div>
            <div class="description">Lorem ipsum dolor sit amet consectetur, adipisicing
              elit. Quasi non possimus libero, ea quas magnam odio quidem fugiat porro
              in! Maxime laboriosam corporis voluptatum totam enim voluptates aliquid!
              Vero, aliquid!
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="https://kit.fontawesome.com/1f65431e04.js"></script>
    <script></script>
    <script src="main.js"></script>
  </body>
</html>

最佳答案

尝试:

document.body.onload = () => {
  var items = document.getElementsByClassName('item');
  var nextButton = document.getElementById('next');
  var prevButton = document.getElementById('prev');
  var currentSlide = function() {
    for (var j = 0; j < items.length; j++) {
      if (items[j].className === "item active") {
        return j;
      }
    }
  }

  var abc, currentslideinner;
  function slideShow(currentslideinner) {
    if (currentslideinner == undefined) {
      currentslideinner = 0;
    }
    clearInterval(abc);
    abc = setInterval(function() {
      items[currentslideinner].classList.remove("active");
      currentslideinner++;
      if (currentslideinner > items.length - 1) {
        currentslideinner = 0;
      }
      console.log(currentslideinner);
      items[currentslideinner].classList.add("active");
    }, 4000);
  }

  slideShow();

  nextButton.addEventListener('click', function() {
    let currentSlide1 = currentSlide();
    items[currentSlide1].classList.remove("active");
    if (currentSlide1 < items.length - 1) {
      items[currentSlide1 + 1].classList.add("active");
      slideShow(currentSlide1 + 1);
    } else {
      items[0].classList.add("active");
      slideShow(0);
    }
  });

  prevButton.addEventListener('click', function() {
    let currentSlide1 = currentSlide();
    if (currentSlide1 > 0) {
      items[currentSlide1].classList.remove("active");
      items[currentSlide1 - 1].classList.add("active");
      slideShow(currentSlide1 - 1);
    }
  });
}
*,
body {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100%;
  max-width: 1170px;
  margin: 0 auto;
}

h1 {
  text-align: center;
}

#carousel {
  margin-top: 20px;
  width: 100%;
  height: auto;
  min-height: 400px;
  display: block;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.item {
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
}

.item.active {
  display: block;
  animation: fadesIn 2000ms forwards;
  -webkit-animation: fadesIn 2000ms forwards;
}

@keyframes fadesIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.item div.carouselContent {
  position: absolute;
  font-family: 'Courier New', Courier, monospace;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  padding: 50px;
  top: 50%;
  transform: translateY(-50%)
}

.item div.carouselContent .title {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 24px;
  width: 100%;
  text-align: center;
}

.item div.carouselContent .description {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  width: 100%;
  text-align: center;
}

#item1 {
  background-color: aquamarine;
}

#item2 {
  background-color: bisque;
}

#item3 {
  background-color: brown;
}

#item4 {
  background-color: blanchedalmond;
}

#next {
  position: absolute;
  top: 50%;
  z-index: 2;
  right: 0px;
  transform: translateY(-50%);
}

#prev {
  position: absolute;
  top: 50%;
  z-index: 2;
  left: 0px;
  transform: translateY(-50%);
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Awesome Carousel</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
      <h1>Awesome Carousel</h1>
      <div id="carousel">
        <div id="next" class="fas fa-arrow-circle-right fa-3x"></div>
        <div id="prev" class="fas fa-arrow-circle-left fa-3x"></div>
        <div id="item1" class="item active">
          <div class="carouselContent">
            <div class="title">Lorem ipsum 1</div>
            <div class="description">Lorem ipsum dolor sit amet consectetur, adipisicing
              elit. Quasi non possimus libero, ea quas magnam odio quidem fugiat porro
              in! Maxime laboriosam corporis voluptatum totam enim voluptates aliquid!
              Vero, aliquid!
            </div>
          </div>
        </div>
        <div id="item2" class="item">
          <div class="carouselContent">
            <div class="title">Lorem ipsum 2</div>
            <div class="description">Lorem ipsum dolor sit amet consectetur, adipisicing
              elit. Quasi non possimus libero, ea quas magnam odio quidem fugiat porro
              in! Maxime laboriosam corporis voluptatum totam enim voluptates aliquid!
              Vero, aliquid!
            </div>
          </div>
        </div>
        <div id="item3" class="item ">
          <div class="carouselContent">
            <div class="title">Lorem ipsum 3</div>
            <div class="description">Lorem ipsum dolor sit amet consectetur, adipisicing
              elit. Quasi non possimus libero, ea quas magnam odio quidem fugiat porro
              in! Maxime laboriosam corporis voluptatum totam enim voluptates aliquid!
              Vero, aliquid!
            </div>
          </div>
        </div>
        <div id="item4" class="item">
          <div class="carouselContent">
            <div class="title">Lorem ipsum 4</div>
            <div class="description">Lorem ipsum dolor sit amet consectetur, adipisicing
              elit. Quasi non possimus libero, ea quas magnam odio quidem fugiat porro
              in! Maxime laboriosam corporis voluptatum totam enim voluptates aliquid!
              Vero, aliquid!
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="https://kit.fontawesome.com/1f65431e04.js"></script>
    <script></script>
    <script src="main.js"></script>
  </body>
</html>

关于javascript - 带有手动控件的 slider 不会自动播放 - 可能是 setInterval 行为的问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56597911/

上一篇：CSS 告诉这个剑道分离器使用 100% 的浏览器窗口高度？

下一篇：css - 使图像旋转，当它旋转到一个 div 上时，改变它的颜色......也许用面具？

相关文章：

javascript - html 主动打开工具提示(通过代码)

html - 日期输入类型未在 IE 10 中显示

css - 未设置 HTML CSS 多类宽度/高度/大小

CSS hover chrome 无法正常工作

javascript - 在网站上制作重复的文本背景？

javascript - Service Worker 加载资源失败:net::ERR_INTERNET_DISCONNECTED

html - 如何删除两个 &lt;input&gt; 标签之间的换行符？

html - 编织多个html文件rstudio

html - 文本不会环绕图像，需要图像与文本顶部对齐

javascript - Kinetic.js 中的平滑动画(html5 canvas)

©2024 IT工具网  联系我们