Slider en javascript

**aghilas informatique** · 05/12/2013, 19h58

Bonjour,
je veux faire un slider qui passe 4 photos sur mon site mais j'ai pas la moindre idée du code que je dois utiliser, quelqu'un peux m'orienter ?
merci d'avance et bonne soirée a tous

**npuzin** · 06/12/2013, 11h21

A l'aide de setTimeout + jqueryui pour faire des effets fadeIn et fadeOut :

Code :

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
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
		<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jquery-ui.css" />
	</head>
	<body>		
		<img id="myImg" style="display:none" />
	</body>	
</html>
 
<script type="text/javascript">
 
	var pictures = ['http://www.developpez.net/forums/images/profil-etendu.gif',
		'http://www.developpez.net/forums/images/misc/im_skype.gif',
		'http://www.developpez.net/forums/images/statusicon/user_offline.gif',
		'http://www.developpez.net/forums/images/statusicon/user_online.gif'];
	var currPicture = -1;
	var speed = 1000;	
	var fadeDuration = 300;
 
	var changePicture = function() {
 
		$('#myImg').fadeOut(fadeDuration, function() {
 
			currPicture++;
			if (currPicture > pictures.length-1)
				currPicture = 0;				
			$('#myImg').attr('src', pictures[currPicture])
				.fadeIn(fadeDuration, function() {
				setTimeout(changePicture, speed);
			});			
		});
 
	};
 
	changePicture();
 
</script>

**SpaceFrog** · 06/12/2013, 11h30

sinon avec une lib comme jquery il existe des plugins du type jquery cycle ...

Slider en javascript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager