Récriture javascript pur en jQuery
Résolu
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 !!
--
Si Dieu a créé l'homme, qui a créé Dieu, l'homme non ?
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 ?
1 réponse
-
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>-
-
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
++ -
-
-
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();
-
