I have jQuery below that is working very well.
Except for one detail:% of% of is not correct:
% is_% is lógica between one ideia and another is the same regardless of the quantity of tempo de transição . But, the way it is, the more images, the faster each one goes.
How do I fix this?
Where am I going wrong on imagem ?
This imagens is best viewed in lógica !
$(document).ready(function(e) {
var tempoTransicao = 20;
var quantasImagens = $("div.slider ul.slide li img").size();
var tamanhoIntervalos = 100/quantasImagens;
var tempoImagens = 0;
var t = 0;
var tMax = 0;
var obj = new Array();
for (i = 0; i < quantasImagens; i++) {
tMin = tMax;
tMax += tamanhoIntervalos;
obj[tMin + '%'] = { 'margin-left': '-' + tempoImagens + '%'};
obj[tMax + '%'] = { 'margin-left': '-' + tempoImagens + '%'};
tempoImagens += 100;
}
console.log(obj);
$.keyframe.define([
$.extend(
{ name: 'tocaSlide' },
obj
)
]);
$("div.slider ul.slide").css({
'animation-duration' : tempoTransicao + 's',
});
}); * {
margin:0;
padding:0;
boder: none;
}
body {
width:1000px;
margin: auto;
}
div.slider {
width:100%;
overflow:hidden;
}
div.slider ul.slide {
width:5000%;
animation:tocaSlide infinite;
}
div.slider ul.slide li {
width:100%;
list-style:none;
}
div.slider ul.slide li img {
float:left;
}
@keyframes tocaSlide {}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><scriptsrc='http://www.hotplateprensas.com.br/estilos/_js/jquery.keyframes.min.js'></script><divclass="slider">
<ul class="slide">
<li><img src="http://www.hotplateprensas.com.br/estilos/_imgs/_slideShow/1.png"/></li><li><imgsrc="http://www.hotplateprensas.com.br/estilos/_imgs/_slideShow/2.png" /></li>
<li><img src="http://www.hotplateprensas.com.br/estilos/_imgs/_slideShow/3.png"/></li><li><imgsrc="http://www.hotplateprensas.com.br/estilos/_imgs/_slideShow/4.png" /></li>
<li><img src="http://www.hotplateprensas.com.br/estilos/_imgs/_slideShow/1.png"/></li><li><imgsrc="http://www.hotplateprensas.com.br/estilos/_imgs/_slideShow/2.png" /></li>
<li><img src="http://www.hotplateprensas.com.br/estilos/_imgs/_slideShow/3.png"/></li><li><imgsrc="http://www.hotplateprensas.com.br/estilos/_imgs/_slideShow/4.png" /></li>
</ul>
</div>