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
|
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Configuration
var retour = true;
var tempsTransition = 1000;
var affichePlayPause = false;
var lectureAutomatique = false;
var tempsAttente = 6000;
var icones = new Array();
icones['play'] = 'img/play_slider.png';
icones['pause'] = 'img/pause_slider.png';
var currentPosition = 0;
var slideWidth = 840;
var slides = $('.slide');
var numberOfSlides = slides.length;
var interval;
var lectureEnCours = false;
// Supprime la scrollbar en JS
$('#slidesContainer').css('overflow', 'hidden');
// Attribue #slideInner à toutes les div .slide
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});
// Longueur de #slideInner égale au total de la longueur de tous les slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Précédent</span>')
.append('<span class="control" id="rightControl">Suivant</span>');
// Hide left arrow control on first load
manageControls(currentPosition);
//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);
});
// 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();
}
}
function suivant(){
$('#rightControl').click();
}
function start() {
lectureEnCours = true;
interval = setInterval(suivant, tempsAttente );
}
function pause() {
lectureEnCours = false;
clearInterval(interval);
}
//Si le diapo est activé
if(lectureAutomatique == true){
start();
}
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();
}
});
}
});
</script> |
Partager