jquery - 每5秒翻转一次图像

我在鼠标上翻转图像。我想每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秒自动翻转一次

最佳答案

您应该使用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

每隔5000毫秒，您将类flipped切换到#f1_card，使其来回翻转。
解释
让我们分解一下我们所做的，我们将:hover改为class，因为我们不想让它在悬停时发生，而是希望每5000毫秒发生一次toggleClass()（我们使用setInterval()函数来实现这一点）。