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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
| <!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<!-- cache-control avec max-age=60 pour le développement uniquement -->
<meta http-equiv="cache-control" content="public, max-age=60">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta name="author" content="Daniel Hagnoul">
<title>Test</title>
<style>
*,
*:after,
*:before {
box-sizing: border-box;
}
/* CSS du test */
#indeximg {
background-image: url("../images/boule1.png");
background-repeat: no-repeat;
background-position: center;
height: 20rem;
width: 20rem;
border: 1pt dotted grey;
opacity: 1;
transition: opacity 1s;
}
#indeximg.fadeOut {
opacity:0;
transition: opacity 1s;
}
#btnStopBackgroundImage {
margin: 2rem;
}
/* Fin CSS du test */
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/locale/fr.js"></script>
<script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.5.1.js"></script>
<script>
'use strict';
document.addEventListener( "DOMContentLoaded", ev => {
// le DOM est construit, la page web n'est pas visible
moment.locale( "fr" );
klog( `DOM ready : ${ new kDvjhDate() }` );
// code du test
// fin code du test
}, false );
window.addEventListener( "load", ev => {
// le DOM est construit et la page web est visible
klog( `Window load : ${ new kDvjhDate() }` );
// code du test
let
index = 0;
const
elemIndexImg = document.querySelector( "#indeximg" ),
elemBtnStopBackgroundImage = document.querySelector( "#btnStopBackgroundImage" ),
arBoules = [
"http://danielhagnoul.developpez.com/images/boule2.png",
"http://danielhagnoul.developpez.com/images/boule3.png",
"http://danielhagnoul.developpez.com/images/boule4.png",
"http://danielhagnoul.developpez.com/images/boule5.png",
"http://danielhagnoul.developpez.com/images/boule6.png",
"http://danielhagnoul.developpez.com/images/boule7.png",
"http://danielhagnoul.developpez.com/images/boule1.png",
],
indexLength = arBoules.length - 1,
setIntervalID = setInterval( () => {
elemIndexImg.classList.add( "fadeOut" );
setTimeout(function() {
elemIndexImg.style.backgroundImage = "url('" + arBoules[ index++ ] + "')";
elemIndexImg.classList.remove( "fadeOut" );
}, 1000 ); // 1s pour le fadeout
if ( index > indexLength ){
index = 0;
};
}, 4000 ); // 1s fadeout + 1s fadein + 2s visible
elemBtnStopBackgroundImage.addEventListener( "click", ev => {
window.clearInterval( setIntervalID );
}, false );
// fin code du test
kIDUnique();
}, false );
</script>
</head>
<body>
<main>
<div id="indeximg">
<p>Haec subinde Constantius audiens et quaedam referente Thalassio doctus, quem eum odisse iam conpererat
lege communi, scribens ad Caesarem blandius adiumenta paulatim illi subtraxit, sollicitari se simulans ne,
uti est militare otium fere tumultuosum, contentum palatinis et protectorum cum Scutariis et Gentilibus,
et mandabat Domitiano, ex comite largitionum, praefecto ut cum in Syriam venerit.</p>
<p>Haec dum oriens diu perferret, caeli reserato tepore Constantius consulatu suo septies et Caesaris ter
egressus Arelate Valentiam petit, in Gundomadum et Vadomarium fratres Alamannorum reges arma </p>
</div>
<button id="btnStopBackgroundImage">Arrêt du défilement des images</button>
</main>
</body>
</html> |
Changer une image en background d'un DIV
Répondre avec citation
Partager