flip image через каждые 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. Теперь вы можете toggleClass() на объект с jQuery, поэтому он удаляется, если он есть, и добавляется, если его там нет.

Этот 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 

Каждый 500 0 миллисекунд вы переключаете класс flipped на #f1_card, чтобы он перевернулся взад-вперед.

---

Объяснение

Давайте разберем, что мы сделали, мы изменили :hover к class, потому что вместо того, чтобы сделать это происходит при наведении курсора мыши, мы хотим сделать это происходит путем toggleClass() каждые 5000 миллисекунд (мы используем функция setInterval()).