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.
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
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 CSS : Sélectionner tout - Visualiser dans une fenêtre à part
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 JAVASCRIPT : Sélectionner tout - Visualiser dans une fenêtre à part
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);
	}
});