Question

我正在鼠标上移动图像。我想自动每5秒翻转一次图像。我是javascript的新手。所以任何人都可以帮助我，这将是伟大的

＆＃13;

 #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;
 }

＆＃13;

<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>

＆＃13;

鼠标工作正常。但我希望每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

您每隔5000毫秒切换flipped上的课程#f1_card，以便它来回翻转。

<强>解释

让我们分解我们所做的事情，我们将:hover更改为class，因为我们希望每隔5000毫秒就让它toggleClass()发生，而不是让它出现在setInterval()上。为此使用div's函数。）

每5秒翻转一次图像

1 个答案: