Récriture javascript pur en jQuery

Résolu
gintoxic Messages postés 524 Date d'inscription   Statut Membre Dernière intervention   -  
gintoxic Messages postés 524 Date d'inscription   Statut Membre Dernière intervention   -
bonjour
en cherchant un moyen de faire un affichage d'image aléatoire avec JS, je suis tombé sur un script simple mais efficace

le voici sans les alert() 

<script> 
var tabImg = new Array("/Files/104203/Img/20/ban_weVibe.png","/Files/104203/Img/20/ban_weVibe.png","/Files/104203/Img/11/ban_plaisir.png","/Files/104203/Img/13/ban_lelo.png","/Files/104203/Img/07/ban_boudoir.png","/Files/104203/Img/04/ban_shunga.png","/Files/104203/Img/20/ban_voulez.png");
var temps = 2000; 
function changeImage(){ 
num = Math.floor(Math.random() * tabImg.length-1)+1;  
document.getElementById("img").src=tabImg[num]; 
setTimeout("changeImage()",temps); 
} 
</script>

maintenant je voudrais savoir s'il est possible de réécrire ce code en jQuery avec en plus un fadeOut/fadeIn en guise de transition (je demande un Fade de base mais je chercherais un autre moyen par la suite, c'est juste pour comprendre comment réécrire ce code)

merci à vous par avance et bon 1er mai !!

1 réponse

Réponse 1 / 1
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
Hello,

Voici ton code refactorisé: 


<html>
 <head>
  <meta charset="utf8">
  <title></title>
  <style type="text/css">
   .picture img{
    position: absolute;
   }
  </style>
 </head>
 <body>
  <div class="picture">
   <img class="final" src="">
   <img class="transition" src="">
  </div>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript">
   var randomDisplay = {
    interval: 4500, // délai de changement d'image
    fadeSpeed: 1000, // Vitesse de transition entre deux images
    timer: null,
    pictures: [
     'http://www.adventuresintwilighting.com/wp-content/uploads/2012/04/LOLcat.jpg',
     'http://www.lemadblog.com/uploads/eated_cookie_lolcat_Funneh_cat_pics-s500x375-60560-580-500x300.jpg',
     'http://3.bp.blogspot.com/-96UF_oYKGM0/UcRM6zTZYNI/AAAAAAAAEdk/HshXgjI0U7I/s1600/LOLcat_swimming.jpg',
     'http://www.brainstorming.fr/fr/wp-content/uploads/2012/10/lolcat.jpg',
     'https://i.chzbgr.com/maxW500/7838992896/hF9B0D6EA/',
     'https://i.chzbgr.com/maxW500/7990774528/h099DD630/'
    ],
    init: function(){
     var me = this;
     $('.final').attr('src', me.getRandomImg());
     this.timer = setInterval(this.changePicture, this.interval, this);
    },
    changePicture: function(me){
     do{
      var picture = me.getRandomImg();
     } while (picture === $('.final').attr('src') );

     $('.transition').hide().attr('src', picture).fadeIn(me.fadeSpeed, function(){
      $('.final').attr('src', picture);
      $('.transition').attr('src', '');
     });
    },
    getRandomImg: function(){
     var pictureIndex = parseInt( Math.random() * this.pictures.length );
     return this.pictures[pictureIndex];
    }
   };
   randomDisplay.init();
  </script>
 </body>
</html>
0
gintoxic Messages postés 524 Date d'inscription   Statut Membre Dernière intervention   10
 
super !!
si tu pouvais me dire où apprendre ce genre de code (livres, sites...)

je te remrcie beaucoup et te souhaite une bonne journée
0
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
Re, pour ce qui est de la structure du code, tu peux aller lire des articles du style https://sebastien-dupire.info/faire-de-la-poo-avec-javascript.html

Pour ce qui est de jQuery il existe aussi de nombreux sites qui t'aideront à maitriser ce framework, comme http://fr.openclassrooms.com/informatique/cours/jquery-ecrivez-moins-pour-faire-plus

++
0
gintoxic Messages postés 524 Date d'inscription   Statut Membre Dernière intervention   10
 
juste une derniere chose que j'ai testé sans resultat probant, c'est de rendre cliquable chaque image et que l'on puisse se rendre sur la page à laquelle correspond l'image cliquée...

à l'heure qu'il est, je recherche encore et je teste


merci

ps : ton premier lien est mort
0
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
réponse probante demain soir, pas en état actuellement >_<
0
gintoxic Messages postés 524 Date d'inscription   Statut Membre Dernière intervention   10
 
je ne comprends pas ce que j'ai fait mais je n'ai plus aucune image qui s'affiche dans ma div qui reçoit le pseudo-slider 
<script type="text/javascript"> 
var randomDisplay = { 
interval: 3000, // délai de changement d'image 
fadeSpeed: 1000, // Vitesse de transition entre deux images 
timer: null, 
pictures: [
'/Files/104203/Img/20/ban_weVibe.png',
'/Files/104203/Img/16/ban_wakeup.png',
'/Files/104203/Img/11/ban_plaisir.png',
'/Files/104203/Img/13/ban_lelo.png',
'/Files/104203/Img/07/ban_boudoir.png',
'/Files/104203/Img/04/ban_shunga.png', 
'/Files/104203/Img/20/ban_voulez.png'
], 

init: function(){ 
var me = this; 
$('.final').getRandomImg(); 
this.timer = setInterval(this.changePicture, this.interval, this); 
}, 
changePicture: function(me){ 
do{ 
var picture = me.getRandomImg(); 
} while (picture === $('.final').pictures ); 

$('.transition').hide().attr('src', picture).fadeIn(me.fadeSpeed, function(){ 
$('.final').attr('src', picture); 
$('.transition').attr('src', ''); 
}); 
}, 
getRandomImg: function(){ 
var pictureIndex = parseInt( Math.random() * this.pictures.length ); 
return this.pictures[pictureIndex]; 
} 
}; 
randomDisplay.init();
0

Discussions similaires

java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
javascript:void(0);
nano -
JCVD -

18 réponses
Faire un echo dans un script JS
CorentinRoche -
CorentinRoche -

6 réponses
afficher un tableau JS en HTML
jibouz12 -
jibouz12 -

3 réponses