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
| $(document).ready(function(){
var retour = true;
var tempsTransition = 1000;
var affichePlayPause = true;
var lectureAutomatique = true;
var tempsAttente = 6000;
var icones = new Array();
icones['play'] = 'http://ns10.freeheberg.com/~fluxrss//website/theme/img/play_slider.png';
icones['pause'] = 'http://ns10.freeheberg.com/~fluxrss//website/theme/img/pause_slider.png';
var interval;
var lectureEnCours = true;
var currentPosition = 0;
var slideWidth = 620;
var slides = $('.slide');
var numberOfSlides = slides.length;
// Supprime la scrollbar en JS
$('#slidesContainer').css('overflow', 'hidden');
slides
.wrapAll('<div id="slideInner"></div>')
// on met tous les slides en float:left pour qu'il s'affichent de manière horizontale
.css({
'float' : 'left',
'width' : slideWidth
});
// La longueur de #slideInner équivaut à la somme de la longueur de tous les slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Insert les flèches de gauche et de droite
$('#fdroite')
.append('<span class="control" id="rightControl"><img src="http://ns10.freeheberg.com/~fluxrss//website/theme/img/fl-1-slide.png" alt="fleche Xbox 360"></span>');
$('#fdgauche')
.prepend('<span class="control" id="leftControl"><img src="http://ns10.freeheberg.com/~fluxrss//website/theme/img/fl-2-slide.png" alt="fleche Xbox 360"></span>');
// Cache la flèche de gauche au début
manageControls(currentPosition);
// crée un écouteur pour l'évènement de type clic sur les div qui ont la classe .control
$('.control')
.bind('click', function(){
// Determine une nouvelle position
currentPosition = ($(this).attr('id')=='rightControl')
? currentPosition+1 : currentPosition-1;
//Cache ou montre les flèches
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
});
// manageControls: Cache ou montre les flèches de contrôles en fonction de la position
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() }
else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() }
else{ $('#rightControl').show() }
}
function start() {
lectureEnCours = true;
interval = setInterval(suivant, tempsAttente );
}
function suivant(){
$('#rightControl').click();
}
function pause() {
lectureEnCours = false;
clearInterval(interval);
}
//Si le diapo est activé
if(lectureAutomatique == true){
start();
}
//bouton lecture paus
if(affichePlayPause == true){
$('#slidesContainer').prepend('<img id="navDiapo" src="" alt="Navigation diaporama" />');
if(lectureAutomatique == true){
$('#navDiapo').attr('src',icones['pause']);
}else{
$('#navDiapo').attr('src',icones['play']);
}
$('#navDiapo').bind('click', function(){
if(lectureEnCours == true){
$(this).attr('src',icones['play']);
pause();
}else{
$(this).attr('src',icones['pause']);
start();
}
});
}
// manageControls: Cache ou montre les flêches de controle en fonction de la position courante
function manageControls(position){
// Cache la fleche "précédent" si on est sur le premier slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Cache la fleche "suivant" si on est sur le dernier slide (et que le retour automatique n'est pas activé)
if(position==numberOfSlides-1 && retour == false){
$('#rightControl').hide();
} else {
$('#rightControl').show();
}
if(position == numberOfSlides && retour == true){
currentPosition = 0;
$('#leftControl').hide();
}
}
//Crée un écouteur d'évènement de type clic sur les classes .control
$('.control')
.bind('click', function(){
// Determine la nouvelle position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
if(currentPosition == numberOfSlides && retour == false ){
currentPosition--;
pause();
}
// Cache ou montre les controles
manageControls(currentPosition);
// Fais bouger le slide
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
},tempsTransition);
}); |
