jquery - 每 5 秒翻转一次图像

Question

我在鼠标悬停时翻转图像。我想每 5 秒自动翻转一次图像。我是 JavaScript 的新手。所以任何人都可以帮助我，这会很棒

 #f1_container {
   position: relative;
   margin: 10px auto;
   width: 450px;
   height: 281px;
   z-index: 1;
 }
 #f1_container {
   perspective: 1000;
 }
 #f1_card {
   width: 100%;
   height: 100%;
   transform-style: preserve-3d;
   transition: all 1.0s linear;
 }
 #f1_container:hover #f1_card {
   transform: rotateY(180deg);
   box-shadow: -5px 5px 5px #aaa;
 }
 .face {
   position: absolute;
   width: 100%;
   height: 100%;
   backface-visibility: hidden;
 }
 .face.back {
   display: block;
   transform: rotateY(180deg);
   box-sizing: border-box;
   padding: 10px;
   color: white;
   text-align: center;
   background-color: #aaa;
 }

<div class="work">
  <a href="inner.html">
    <div id="f1_container">
      <div id="f1_card" class="shadow">
        <div class="front face">
          <img src="img/work1.jpg" class="bottom" alt="" />
        </div>
        <div class="back face center">
          <img src="img/work2.jpg" class="top" alt="" />
        </div>
      </div>
    </div>
  </a>
</div>

在鼠标上它工作正常。但我希望每 5 秒自动翻转一次

Answer 1

你应该使用 setInterval()

window.setInterval(function() {
    // Function goes here
}, 5000);

它每 5000 毫秒循环一次函数。

---

在您的情况下，您已经在使用 :hover 更改 css，将此 :hover 更改为 class。现在，您可以使用 jQuery 在对象上 toggleClass()，因此如果它存在，它就会被删除，如果它不存在，它就会被添加。

这个 CSS

#f1_container:hover #f1_card {
  transform: rotateY(180deg);
  box-shadow: -5px 5px 5px #aaa;
}

变成:

.flipped { 
  transform: rotateY(180deg);
  box-shadow: -5px 5px 5px #aaa;
}

还有你的 jQuery:

window.setInterval(function() { //setInterval (loop a function)
    $("#f1_card").toggleClass("flipped"); //toggle class "flipped"
}, 5000); // Loop it every 5000 milliseconds

JavaScript:

window.setInterval(function() {
    document.getElementById("f1_card").classList.toggle("flipped");
}, 5000)

每 5000 毫秒，您在 #f1_card 上切换类 flipped，以便它来回翻转。

---

解释

让我们分解一下我们所做的，我们将 :hover 更改为 class 因为我们不想让它在悬停时发生，而是让它在 发生toggleClass() 每 5000 毫秒一次(为此我们使用 setInterval() 函数)。