Покадровая смена изображений

434

24 ноября 2016, 10:00

Как сделать подобную анимацию

Пишу следующее

HTML

<div class="pos">
  <div class="q-1 active"></div>
  <div class="q-2 active"></div>
  <div class="q-3 active"></div>
  <div class="q-4 active"></div>
</div>

CSS

.pos {
  margin-top: 150px;
}
.q-1,
.q-2,
.q-3,
.q-4,
.q-5,
.q-6,
.q-7 {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 1px;
  background: red;
}
.q-1.active:after{
  position: absolute;
  content:url('flower-1.png');
  height:145px;
  top:-145;
}
.q-2.active:after{
  position: absolute;
  content:url('flower-2.png');
  height: 91px;
  top: -92px;
}
.q-3.active:after{
  position: absolute;
  content:url('flower-3.png');
  height: 120px;
  top: -120px;
}
.q-4.active:after{
  position: absolute;
  content:url('flower-4.png');
  height: 95px;
  top: -95px;
}

el=$(".pos div")
cnt=0
$(".pos div").each(function(i,e){
  setInterval(function(){
    el.eq(cnt++).addClass("active")
  },2000)  
  el.removeClass("active")
})

Answer 1

var func = window.setInterval(start, 2000), 
    els = $("div"), 
    cnt = 0; 
 
function start() { 
  cnt = (cnt === els.length) ? 0 : cnt; 
   
  els.removeClass("active"); 
  els.eq(cnt++).addClass("active") 
}

.q-1, 
.q-2, 
.q-3, 
.q-4, 
.q-5, 
.q-6, 
.q-7 { 
  background: #ccc; 
  position: relative; 
  display: inline-block; 
  height: 145px; 
  width: 40px; 
  border-bottom: solid 2px red; 
  font: bold 1em sans-serif; 
} 
 
.q-1.active:after, 
.q-2.active:after, 
.q-3.active:after, 
.q-4.active:after, 
.q-5.active:after, 
.q-6.active:after, 
.q-7.active:after { 
  position: absolute; 
    left: 15px; 
    top: 10px; 
} 
 
.q-1.active:after{ content:"1"; } 
.q-2.active:after{ content:"2"; } 
.q-3.active:after{ content:"3"; } 
.q-4.active:after{ content:"4"; } 
.q-5.active:after{ content:"5"; } 
.q-6.active:after{ content:"6"; } 
.q-7.active:after{ content:"7"; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="q-1"></div> 
<div class="q-2"></div> 
<div class="q-3"></div> 
<div class="q-4"></div> 
<div class="q-5"></div> 
<div class="q-6"></div> 
<div class="q-7"></div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Не работает отправка формы

Здравствуйте, почему-то не работает отправка формы на почты, помогите разобраться в чем дело.

345

jQuery

Проверка символов и сокрытие блоков

Можно ли реализовать подобную проверку? Имеем div в котором будут меняться значения, например, на одной странице выводится 123, на второй 4, на третьей...

332

jQuery

Проверка введенных данных в поле prompt

Я новичок и честно говоря, просто не нашел четкого ответа в гугле. Что я написал не так? Хотелось бы, что бы выполнялось условие при введении...

488

jQuery

JQuery открытие меню

Имеется вот такой кодик.

447