Admin Admin Messages : 317 Date d'inscription : 22/09/2012
| Sujet: (JV) 04 MAI 2015 - JAVASCRIPT SLIDESHOW Lun 4 Mai - 7:29 | |
| - Code:
-
$(document).ready(function(){ //Configuration var retour = true; var tempsTransition = 1500; var affichePlayPause = true; var lectureAutomatique = false; var tempsAttente = 6000; var icones = new Array(); icones['play'] = 'http://image.noelshack.com/fichiers/2015/19/1430716508-playy.png'; icones['pause'] = 'http://image.noelshack.com/fichiers/2015/19/1430716508-playy.png'; var currentPosition = 0; var slideWidth = 600; 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(); } }); } }); |
|