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 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95
| <!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta http-equiv="cache-control" content="public, max-age=60">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<meta name="author" content="Daniel Hagnoul">
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.min.css">
<style>
#bandeau {
position: relative;
width: 200px;
height: 200px;
border: 1px solid black;
overflow: hidden;
}
</style>
</head>
<body>
<div id="bandeau"></div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
"use strict";
$( function(){ // forme abrégée de $(document).ready( function( ){
});
$( window ).load( function(){
function defilImg(elName, srcs, pas, tps) {
var
el = document.getElementById(elName),
imgs = [],
offset = 0,
srcsLength = srcs.length;
tps = tps || 200;
pas = pas || 5;
for ( var i = 0; i < srcsLength; i++ ){
var img = new Image();
img.src = 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,
imgsLength = imgs.length,
last = imgsLength - 1;
( function d( ){
for ( var i = 0, k = imgsLength; i < k; 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 > imgsLength - 1 ){
first = 0;
}
}
}
setTimeout( d, tps );
})();
}
defilImg( "bandeau", [
"../images/fleur1.png",
"../images/fleur2.png",
"../images/fleur3.png",
"../images/fleur4.png"
] );
});
</script>
</body>
</html> |
Partager