自动换图的轮播[JS]

Question

我正在尝试制作一个 3 秒后更改图像的轮播。

我得到了 3 张图像 slide1, slide2, slide3 并感谢方法 change1,change2,change3 更改图像。

我想像这样自动化一切：

function time(change1, change2, change3) {

  this.change1 = change1;
  this.change2 = change2;
  this.change3 = change3;
  t = setInterval(change1 && change2 && change3, 3000); //obviously it doesn't work.

}
/*
---------------ANOTHER METHOD-----------------
*/

function time() {
  t = setInterval(check, 3000);

}

function check() {
  if (slide1.style.display = "inline-block") {
    change2();
  } else if (slide2.style.display = "inline-block") {
    change3();
  } else {
    change1();
  }
}

但我不知道如何

有什么想法吗？

Answer 1

好吧，这是一项简单的工作，这是一个简单的示例，说明您如何做到这一点

我使用了 jq，但你会明白的。如果你只想要让我知道的 js，我会这样做

/// use jq for batter effekt

var sliders = $(".container > div");
var current;
function change() {
  if (!current)
    current = sliders.first();
  else {
    current.hide("fast");
    current = current.next();
  }
  if (current.length == 0)
    current = sliders.first();
  current.show();
}

setInterval(change, 2000);

.container {
  display: flex;
  border: 1px solid #CCC;
}

.container>div {
  width: 100%;
  min-height: 100px;
}

.container>div:not(:first-child){
 display: none;

   }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">

  <div style="background:red;"></div>

  <div style="background:green"></div>
  <div style="background:blue"></div>


</div>

自动换图的轮播[JS]

Carousel that automatically changes image [JS]

javascript

time

carousel