Récriture javascript pur en jQuery

Résolu

gintoxic Messages postés 566 Statut Membre -
gintoxic Messages postés 566 Statut Membre - 6 mai 2014 à 23:19

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 !!

--
Si Dieu a créé l'homme, qui a créé Dieu, l'homme non ?

Afficher la suite

1 réponse

prosthetiks Messages postés 1309 Statut Membre 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>

gintoxic Messages postés 566 Statut Membre 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 1309 Statut Membre 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 566 Statut Membre 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 1309 Statut Membre 431

réponse probante demain soir, pas en état actuellement >_<
0

gintoxic Messages postés 566 Statut Membre 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();

Récriture javascript pur en jQuery

1 réponse

Discussions similaires

Newsletters