Autopassion.net le site ddi  l'automobile cr par ses utilisateurs
Partagez | 
 

 (JV) 04 MAI 2015 - JAVASCRIPT SLIDESHOW

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
avatar
Admin

Messages : 317
Date d'inscription : 22/09/2012


MessageSujet: (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();
      }
   });
}
 
 
     
});

_________________
Then, honey you're not there when I'm With my foresight bitch you pay me by Nothing like your last guy, he too square for you He don't smack that ass and pull your hair like that So I just watch and wait for you to salute But you didn't pick Not many women can refuse this pimpin' I'm a nice guy, but don't get it if you get with me.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://ladymattress.easyforumpro.com
 

(JV) 04 MAI 2015 - JAVASCRIPT SLIDESHOW

Voir le sujet précédent Voir le sujet suivant Revenir en haut 

 Sujets similaires

-
» Range Rover Evoque Deux Nouveaux Modèles Autobiography en 2015
» Probléme Màj 2015.20 sur 3590LMT
» Une nouvelle version de la cartographie est disponible (la NTU 2015.10)
» Carto 2015.20
» Slideshow horizontal infini
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
 :: Votre 1ère catégorie :: CODES GAS TD-
Sauter vers: