Initialiser "setInterval()" avec jQuery
Bonjour,
J'ai fais beaucoup beaucoup beaucoup de recherches pour créer le slideshow le plus simple possible en JavaScript, donc avec le framework jQuery.
Cependant, j'ai des difficultés à comprendre pourquoi mon script ne marche pas après moultes vérifications et tests.
Pouvez-vous m'aider à comprendre SVP. :mrgreen:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ssjs.js"></script>
<link rel="stylesheet" href="sscss.css">
</head>
<body>
<div id="slide">
<ul>
<li><img src="image1.jpg"></li>
<li><img src="image2.jpg"></li>
<li><img src="image3.jpg"></li>
</ul>
</div>
</body>
</html> |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| body{ padding:0; margin:0;}
#slide {
float:left;
position:relative;
height: 50vh;
width: 50vw;
background-color:red;
}
#slide, img{
height: 50vh;
width: 50vw;
}
#slide, ul {
list-style: none;
margin: 0;
padding: 0;
} |
Code:
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
|
$(document).ready(function(){
window.onload = interval;
var s = 0;
var time = 3000;
var lens = $("#slide ul li").length;
$("#slide ul li").each(function(i){
if(i == 0)
$(this).show();
else
$(this).hide();
});
function interval(){
setInterval(function (){
s++;
if(s >= lens) s = 0;
$("slide ul li").hide();
$("slide ul li").eq(s).fadeIn(1000);
},time);
}
}); |
