Récriture javascript pur en jQuery

Résolu/Fermé

gintoxic Messages postés 524 Date d'inscription mardi 31 juillet 2007 Statut Membre Dernière intervention 7 avril 2016 - 1 mai 2014 à 01:45
gintoxic Messages postés 524 Date d'inscription mardi 31 juillet 2007 Statut Membre Dernière intervention 7 avril 2016 - 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 !!

A voir également:

Récriture javascript pur en jQuery
Telecharger javascript - Télécharger - Langages
Javascript void 0 c'est quoi ✓ - Forum Réseaux sociaux
Javascript echo ✓ - Forum PHP
Passer variable javascript en php ajax ✓ - Forum PHP
Retour à la ligne javascript ✓ - Forum Javascript

1 réponse

Réponse 1 / 1

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
Modifié par prosthetiks le 1/05/2014 à 09:03

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 524 Date d'inscription mardi 31 juillet 2007 Statut Membre Dernière intervention 7 avril 2016 10
1 mai 2014 à 14:32

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

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
1 mai 2014 à 14:46

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

++

gintoxic Messages postés 524 Date d'inscription mardi 31 juillet 2007 Statut Membre Dernière intervention 7 avril 2016 10
Modifié par gintoxic le 3/05/2014 à 16:39

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

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
3 mai 2014 à 23:49

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

gintoxic Messages postés 524 Date d'inscription mardi 31 juillet 2007 Statut Membre Dernière intervention 7 avril 2016 10
4 mai 2014 à 13: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();

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

afficher un tableau JS en HTML

java script error in the main process

Nodejs.exe est-ce un virus

[Javascript] Tables de Multiplication

Discussions similaires

Newsletters