0

Здравствуйте, подскажите, пожалуйста, как реализовать таку задачку, нужно сделать анимацию, чтобы картинка периодически с каким-то заданным интервалом менялась на другую, и обратно. Такое нужно через JavaScript делать, или можно и через CSS анимацию?

1 ответ 1

2

Есть множество способов решения данного вопроса. Пример одного из них (без использования js):

.container {
  background:#000;
  width:500px;
  margin: 0 auto;
  padding: 10px 10px 0 10px;
  
  
}

.slideshow_wrapper {
  width:500px;
  height:280px;
  overflow: hidden;
   
}

.slideshow {
  width:1500px;
  height:280px;
  margin: 0 0 0 -1000px;
 position: relative;
  -webkit-animation-name: slide_animation;
  -webkit-animation-duration:10s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-direction:alternate;
   -webkit-animation-play-state: running;
}

.slide {
  
  width:500px;
  height: 270px;
  position:relative;
  float:left;
  overflow:hidden;
  
}

.slideshow img{
  width:500px; height:270px;
}

@-webkit-keyframes slide_animation {
  
  0% {left:0px;}
  10% {left:500px;}
  20% {left:500px;}
  30% {left:500px;}
  40% {left:500px;}
  50% {left:500px;}
  60% {left:500px;}
  70% {left:1000px;}
  80% {left:1000px;}
  90% {left:1000px;}
  100% {left:1000px;}
  
  
}
<div class="container">
  <div class="slideshow_wrapper">
    <div class="slideshow">
      <div class="slide_one slide">
        <img src="http://i1.ytimg.com/vi/hP9zimdPXtk/0.jpg" />
      </div>
      
      <div class="slide_two slide">
        <img src="https://i1.ytimg.com/vi/HiS1-l2xadg/mqdefault.jpg" />
      </div>
      
       <div class="slide_three slide">
        <img class="slide_img" src="http://i1.ytimg.com/vi/_di83KPJY3s/0.jpg" />
      </div>
    </div></div></div></div>

1
  • 1
    Ну у Вас и фотографии :DD
    – entithat
    13 апр 2018 в 14:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.