Récriture javascript pur en jQuery
Résolu
gintoxic
Messages postés
566
Statut
Membre
-
gintoxic Messages postés 566 Statut Membre -
gintoxic Messages postés 566 Statut Membre -
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()
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 !!
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
- A javascript error occurred in the main process - Forum Windows
- A javaScript error occurred in the main process - Forum Handicap / Accessibilté
- Javascript arrondi - Forum Javascript
- Javascript arrondi après la virgule ✓ - Forum Windows
1 réponse
Hello,
Voici ton code refactorisé:
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>
si tu pouvais me dire où apprendre ce genre de code (livres, sites...)
je te remrcie beaucoup et te souhaite une bonne journée
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
++
à l'heure qu'il est, je recherche encore et je teste
merci
ps : ton premier lien est mort