1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
| <div id="bandeau" style="position: relative; width: 200px; height: 200px; border: 1px solid black;
overflow: hidden;">
</div>
<script>
/*$(document).ready(function () {
$('#s4').cycle({
fx: 'fade',
speed: 300,
timeout: 3000,
next: 's4',
pause: 1
});
});*/
defilImg('bandeau', new Array("violet.jpg", "orange.jpg", "vert.jpg", "monein.jpg"));
function defilImg(elName, srcs, pas, tps) {
el = document.getElementById(elName);
var tps = tps || 200;
var pas = pas || 5;
var imgs = [];
var offset = 0;
for (var i = 0; i < srcs.length; i++) {
var img = new Image();
img.src = "img/" + srcs[i];
imgs.push(img);
img.style.height = el.offsetHeight + "px";
img.style.position = "absolute";
img.style.left = offset + "px";
el.append(img);
offset += img.offsetWidth;
}
var first = 0;
var last = imgs.length - 1;
(function d() {
for (var i = 0, l = imgs.length; i < l; i++) {
var left = parseInt(imgs[i].style.left, 10);
imgs[i].style.left = (left - pas) + "px";
if (i == first && (left - pas + imgs[i].offsetWidth) < 0) {
imgs[i].style.left = (parseInt(imgs[last].style.left, 10) + imgs[last].offsetWidth - (i == 0 ? pas : 0)) + "px";
last = first++;
if (first > imgs.length - 1) { first = 0; }
}
}
setTimeout(d, tps);
})();
}
</script> |
Partager