Comment puis-je automatiser mon slider ?

Version imprimable

Bonjour,

je suis débutant dans jquery et j'ai ce bout de code pour mon slideshow mais je n'arrive pas à le faire fonctionner en mode automatique.

Voici le code :

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
28
29
30
31
32
33
34
<script type="text/javascript">
		$(document).ready(function() {
			// Save  the jQuery objects for later use.
 
			var outer		= $("#preview_outer");
			var arrow		= $("#arrow");
			var thumbs		= $("#thumbs span");
 
			var preview_pos;
			var preview_els	= $("#preview_inner div");
			var image_width	= preview_els.eq(0).width(); // Get width of imaages
 
			loop: true;
	    	autoSlide: true;
		    autoSlideInterval: 1000;
 
			// Hook up the click event
			thumbs.click(function() {
				// Get position of current image
				preview_pos = preview_els.eq( thumbs.index( this) ).position();
 
				// Animate them!
				outer.stop().animate( {'scrollLeft' : preview_pos.left},	500 );
				arrow.stop().animate( {'left' : $(this).position().left },	500 );
			});
 
			// Reset positions on load
			arrow.css( {'left' : thumbs.eq(0).position().left } ).show();
			outer.animate( {'scrollLeft' : 0}, 0 );
 
			// Set initial width
			$("#preview_inner").css('width', preview_els.length * image_width);
		});
	</script>

J'ai essayer ceci mais sans aucun résultat :

Code:

1
2
3
loop: true;
autoSlide: true;
 autoSlideInterval: 1000;

Merci beaucoup de votre aide.

21/03/2010, 22h32
danielhagnoul

Bonsoir.

Autoplay ? :calim2:

De quoi parle-t-on, d'un plug-in ?
Merci de préciser et d'ajouter un lien vers la chose.
22/03/2010, 18h50
mamsk00

Bonjour,

quand je parle de " autoplay ", je veux dire que je recherche à automatiser mon slider lol :P. Désoler pour la confusion. Je veux juste comprendre comment je peux faire pour que mon slider tourne automatiquement image à image et en boucle. Merci beaucoup de votre réponse.

Bonsoir.

Citation:

Envoyé par mamsk00

J'ai essayer ceci mais sans aucun résultat :

Code:

1
2
3
loop: true;
autoSlide: true;
 autoSlideInterval: 1000;

Sans cette remarque, qui m'a fait penser à des options d'un plug-in et avec la totalité de votre code, ce problème aurait trouvé une solution beaucoup plus rapide.

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
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8"/>
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style>
		body {
			background: #EEE;	
			font-family: "Trebuchet MS",Verdana,Arial,sans-serif;
			font-size: 14px;
			line-height: 1.6;
		}
		#content {
			width: 980px;
			margin: 50px auto;
			padding: 20px;
			background: #FFF;	
			border: 1px solid #CCC;
		}
		h1 {
			margin: 0;
		}
		hr {
			border: none;
			height: 1px; line-height: 1px;
			background: #CCC;	
			margin-bottom: 20px;
			padding: 0;
		}
		p {
			margin: 0;	
			padding: 7px 0;
		}
		.clear {
			clear: both;
			line-height: 1px;
			font-size: 1px;
		}
		a { 
			outline-color: #888;	
		}
		a:link {
			color: #FFF;
		}
		a:visited {
			color: #FFF;
		}
		a:hover {
			color: #FFF;
		}
		a:active {
			color: #FFF;
		}
		#preview_wrap {
			margin: 0 auto;
			padding: 22px;
			width: 934px; 
			height: 300px;
			background: url('bg_preview.gif') top left no-repeat;
		}
		#preview_outer {
			overflow: hidden;
			width: 934px;
			height: 316px;
			position: relative;
			top: -10px;
		}
		#preview_inner {
			text-align: left;
			height: 100%;
			position: relative;
 
		}
		#preview_inner div {
			float: left;
			width: 980px;
			height: 318px;
			position: relative;
 
		}
		#thumbs {
			padding-top: 23px;
			position: relative;
			width: 980px;
			text-align: center;	
		}
		#thumbs span {
			padding: 10px;
			width: 148px;
			height: 80px;
			cursor: pointer;
			background: url('bg_thumb.gif') top left no-repeat;
			display: inline-block;
		}
		#arrow {
			position: absolute;
			top: -13px;
			background: url('bg_arrow.gif') top center no-repeat;
			width: 170px;
			height: 50px;
			display: none;
		}
	</style>
	<script charset="CP-1252" src="../lib/jquery-1.4.2.min.js"></script>
	<script>
		function loopMachine(delay){
			var thumbs = $("#thumbs span");
			var nb = thumbs.length;
			var i = 0;
 
			var goLoop = window.setInterval(function(){
				thumbs.eq(((i > nb) ? (0) : (i++))).click();
			}, delay);
 
			window.setTimeout(function(){
				window.clearInterval(goLoop);
			}, (nb * delay + delay));
		}
 
		$(function(){
			var outer = $("#preview_outer");
			var arrow = $("#arrow");
			var thumbs = $("#thumbs span");
 
			var preview_pos;
			var preview_els	= $("#preview_inner div");
			var image_width	= preview_els.eq(0).width(); // Get width of imaages
 
			// Hook up the click event
			thumbs.click(function() {
				// Get position of current image
				preview_pos = preview_els.eq( thumbs.index( this) ).position();
 
				// Animate them!
				outer.stop().animate( {'scrollLeft' : preview_pos.left},	500 );
				arrow.stop().animate( {'left' : $(this).position().left },	500 );
			});
 
			// Reset positions on load
			arrow.css( {'left' : thumbs.eq(0).position().left } ).show();
			outer.animate( {'scrollLeft' : 0}, 0 );
 
			// Set initial width
			$("#preview_inner").css('width', preview_els.length * image_width);
 
			loopMachine(1000); // 1000 = 1 seconde
		});
	</script>
</head>
<body>
	<div id="content">
		<div id="preview_wrap">
			<div id="preview_outer">
				<div id="preview_inner">
					<div>
						<a href="http://www.leonardomaia.com.br/">
							<img src="1_b.jpg" alt="Leonardo Maia" />
						</a>
					</div>
					<div>
						<a href="http://skillicorn.org/">
							<img src="2_b.jpg" alt="skillicorn" />
						</a>
					</div>
					<div>
						<a href="http://www.energycell.co.uk/">
							<img src="3_b.jpg" alt="theenergycell" />
						</a>
					</div>
					<div>
						<a href="http://fredmaya.com/">
							<img src="4_b.jpg" alt="Fred Maya" />
						</a>
					</div>
                    <div>
						<a href="http://www.leonardomaia.com.br/">
							<img src="1_b.jpg" alt="Leonardo Maia2" />
						</a>
					</div>
				</div>
			</div>
		</div>
		<div id="thumbs">
			<div id="arrow"></div>
			<span>
				<img src="1_s.jpg" alt="Leonardo Maia" />
			</span>
			<span>
				<img src="2_s.jpg" alt="skillicorn" />
			</span>
			<span>
				<img src="3_s.jpg" alt="theenergycell" />
			</span>
			<span>
				<img src="4_s.jpg" alt="Fred Maya" />
			</span>
            <span>
				<img src="1_s.jpg" alt="Leonardo Maia2" />
			</span>
		</div>
	</div>
</body>  
</html>

25/03/2010, 00h05
mamsk00

Bonsoir,

d'abord merci beaucoup pour votre aide ensuite, le code fonctionne mais pas exactement comme il le faudrait. Il fait son cycle d'image et après il s'arrête, comment lui dire qu'il revienne à la première image et refaire le cycle à l'infini ? Après, quand il est en cours de cycle par exemple il est sur la 3ème image et va passer sur la 4ème, je décide de revenir d'un coup à l'image 1 via les thumbs mais la il ne veut pas revenir tant qu'il n'a pas fini son cycle, il faudrait qu'il puisse revenir à n'importe qu'elle endroit puis de continuer normalement son tour. Merci.
25/03/2010, 00h35
danielhagnoul

Dans la fonction loopMachine() si on enlève le setTimeout() l'animation continuera indéfiniment.

C'est justement pour que l'utilisateur puisse reprendre la main que l'animation s'arrête.
25/03/2010, 15h08
mamsk00
Quand j'efface la fonction
Code:

1 2 3 window.setTimeout(function(){ window.clearInterval(goLoop); }, (nb * delay + delay));
à la fin de mon cycle le slider revient bien à la première image mais s'arrête à celle-ci ?? J'aurais besoin de faire l'animation en continue mais l'utilisateur peut choisir manuellement à tous moment qu'elle image afficher puis le délais dépasser l'animation continue à l'image suivante et non à l'image suivante d'où avait été interrompu le cycle. Un peu comme le système de publiciter dans la home page de matériel.net. Merci beaucoup de vos réponses.

Bonsoir.

Voilà, je pense, un exemple qui répond à vos souhaits.

Petite remarque, le forum sert à poser une question lorsque l'on est bloqué quelque part et non à faire réaliser son travail par un autre.

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
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8"/>
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style>
		body {
			background: #EEE;	
			font-family: "Trebuchet MS",Verdana,Arial,sans-serif;
			font-size: 14px;
			line-height: 1.6;
		}
		#content {
			width: 980px;
			margin: 50px auto;
			padding: 20px;
			background: #FFF;	
			border: 1px solid #CCC;
		}
		h1 {
			margin: 0;
		}
		hr {
			border: none;
			height: 1px; line-height: 1px;
			background: #CCC;	
			margin-bottom: 20px;
			padding: 0;
		}
		p {
			margin: 0;	
			padding: 7px 0;
		}
		.clear {
			clear: both;
			line-height: 1px;
			font-size: 1px;
		}
		a { 
			outline-color: #888;	
		}
		a:link {
			color: #FFF;
		}
		a:visited {
			color: #FFF;
		}
		a:hover {
			color: #FFF;
		}
		a:active {
			color: #FFF;
		}
		#preview_wrap {
			margin: 0 auto;
			padding: 22px;
			width: 934px; 
			height: 300px;
			background: url('bg_preview.gif') top left no-repeat;
		}
		#preview_outer {
			overflow: hidden;
			width: 934px;
			height: 316px;
			position: relative;
			top: -10px;
		}
		#preview_inner {
			text-align: left;
			height: 100%;
			position: relative;
 
		}
		#preview_inner div {
			float: left;
			width: 980px;
			height: 318px;
			position: relative;
 
		}
		#thumbs {
			padding-top: 23px;
			position: relative;
			width: 980px;
			text-align: center;	
		}
		#thumbs span {
			padding: 10px;
			width: 148px;
			height: 80px;
			cursor: pointer;
			background: url('bg_thumb.gif') top left no-repeat;
			display: inline-block;
		}
		#arrow {
			position: absolute;
			top: -13px;
			background: url('bg_arrow.gif') top center no-repeat;
			width: 170px;
			height: 50px;
			display: none;
		}
	</style>
	<script charset="CP-1252" src="../lib/jquery-1.4.2.min.js"></script>
	<script>		
		$(function(){
			var outer = $("#preview_outer");
			var arrow = $("#arrow");
			var thumbs = $("#thumbs span");
 
			var preview_pos;
			var preview_els	= $("#preview_inner div");
			var image_width	= preview_els.eq(0).width(); // Get width of imaages
 
			var loopEngine; // la variable pour appeler clearInterval
 
			function loopMachine(i, delay){
				var nb = thumbs.length - 1;
				var k = i;
 
				var goLoop = window.setInterval(function(){
					if (k > nb) {
						k = 0;
					}
 
					// Get position of current image
					preview_pos = preview_els.eq(k).position();
 
					// Animate them!
					outer.stop().animate({scrollLeft: preview_pos.left}, 500);
					arrow.stop().animate({left: thumbs.eq(k++).position().left }, 500);				
				}, delay);
 
				return goLoop;
			}
 
			// Hook up the click event
			thumbs.click(function() {
				// arrête loopEngine actuel
				window.clearInterval(loopEngine);
 
				var thumbNumber = thumbs.index(this);
 
				// Get position of current image
				preview_pos = preview_els.eq(thumbNumber).position();
 
				// Animate them!
				outer.stop().animate({scrollLeft: preview_pos.left}, 500 );
				arrow.stop().animate({left: $(this).position().left}, 500 );
 
				// démarre un nouveau loopEngine après un délai de 2000 = 2s
				// laisser un peu de temps à l'utilisateur pour admirer son choix
				window.setTimeout(function(){
					loopEngine = loopMachine(thumbNumber++, 1000); // numéro de la thumb suivante
				}, 2000);
			});
 
			// Reset positions on load
			arrow.css( {'left' : thumbs.eq(0).position().left } ).show();
			outer.animate( {'scrollLeft' : 0}, 0 );
 
			// Set initial width
			$("#preview_inner").css('width', preview_els.length * image_width);
 
			loopEngine = loopMachine(0, 1000); // numéro de la thumb et délai
		});
	</script>
</head>
<body>
	<div id="content">
		<div id="preview_wrap">
			<div id="preview_outer">
				<div id="preview_inner">
					<div>
						<a href="http://www.leonardomaia.com.br/">
							<img src="1_b.jpg" alt="Leonardo Maia" />
						</a>
					</div>
					<div>
						<a href="http://skillicorn.org/">
							<img src="2_b.jpg" alt="skillicorn" />
						</a>
					</div>
					<div>
						<a href="http://www.energycell.co.uk/">
							<img src="3_b.jpg" alt="theenergycell" />
						</a>
					</div>
					<div>
						<a href="http://fredmaya.com/">
							<img src="4_b.jpg" alt="Fred Maya" />
						</a>
					</div>
                    <div>
						<a href="http://www.leonardomaia.com.br/">
							<img src="1_b.jpg" alt="Leonardo Maia2" />
						</a>
					</div>
				</div>
			</div>
		</div>
		<div id="thumbs">
			<div id="arrow"></div>
			<span>
				<img src="1_s.jpg" alt="Leonardo Maia" />
			</span>
			<span>
				<img src="2_s.jpg" alt="skillicorn" />
			</span>
			<span>
				<img src="3_s.jpg" alt="theenergycell" />
			</span>
			<span>
				<img src="4_s.jpg" alt="Fred Maya" />
			</span>
            <span>
				<img src="1_s.jpg" alt="Leonardo Maia2" />
			</span>
		</div>
	</div>
</body>  
</html>

25/03/2010, 23h43
mamsk00

MERCIIIIIIIIIIIIIIIIIIIII BEAUCOUP. Exactement ce que je recherchais. Encore merci du temps que vous m'avez consacrer. Bonne soirée.

:ccool: