Slideshow images et textes en pur javascript

Soyez le premier à donner votre avis sur cette source.

Vue 14 052 fois - Téléchargée 2 633 fois

Description

Bjr,
Voulant me frotter de plus prêt à javascript, j'ai codé un slideshow 'par recouvrement' (z-index).
On peut choisir la direction du recouvrement et l'emplacement du texte.
La vitesse de défilement des images et du texte sont réglables séparément.
La démo se trouve sur cette page: http://ansuzpeorth.perso.sfr.fr/slideshow.xml

Source / Exemple :


/* CSS (slideshow.css) */

/* 
--------------------------------------------------------------------------------
------------- slideshow CSS ----------------------------------------------------
--------------------------------------------------------------------------------

  • /
.slideshow-img { background-color: white; background-repeat: no-repeat; background-position: center; } .content-text { overflow:hidden; position:relative; color:black; /* You can change */ text-align:center; /* You can change */ padding:5px; /* You can change */ margin-left:20px; /* You can change */ margin-right:20px; /* You can change */ z-index:0; } .back-trans { z-index:-1; position:absolute; overflow:hidden; top:0px; bottom:0px; left:0px; right:0px; background-color:white; /* You can change color & opacity */ filter:alpha(opacity=70); opacity:0.7; } .pos-left { right: 9999px; } .pos-right { left: 9999px; } /* -------------------------------------------------------------------------------- ------------- player CSS ------------------------------------------------------- --------------------------------------------------------------------------------
  • /
.triangle { width:0; height:0; border:8px solid transparent; } .triangle-droit { border-left:8px solid #323536; } .triangle-gauche { border-right:8px solid #323536; } .triangle-play { border-left:12px solid green; float:left; cursor: pointer; } .container-double { cursor: pointer; position:relative; float:left; z-index:11; } .second-triangle-droit { position:absolute; left:8px; top:0px; } .second-triangle-gauche { position:absolute; right:8px; top:0px; } .lecteurSlideShow { position:relative; background-color:white; filter:alpha(opacity=70); opacity:0.7; overflow:auto; padding: 5px 0px 2px 8px; width:70px; z-index:10; } /* END CSS */ /* JAVASCRIPT (slideshow.js) */ /* ############################################################################ ## ## ## Copyright (C) 2012 AnsuzPeorth (ansuzpeorth AT gmail DOT com) ## ## ## ## This program is free software: you can redistribute it and/or modify ## ## it under the terms of the GNU General Public License as published by ## ## the Free Software Foundation, either version 3 of the License, or ## ## (at your option) any later version. ## ## ## ## This program is distributed in the hope that it will be useful, ## ## but WITHOUT ANY WARRANTY; without even the implied warranty of ## ## MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the ## ## GNU General Public License for more details. ## ## ## ## You should have received a copy of the GNU General Public License ## ## along with this program. If not, see <http://www.gnu.org/licenses/>. ## ## ## ############################################################################
  • /
function ClassSlideshow() { // ------------------------------------------------------------------------- // ---------------------- class variable ----------------------------------- // ------------------------------------------------------------------------- this.currentSlide = 0; this.flagSliding = true; var _self = this; // ------------------------------------------------------------------------- // ---------------------- utility ------------------------------------------ // ------------------------------------------------------------------------- this.returnType = function() { if(this.currentElement.textPosition == 'left') { var type = 'right'; } else{ var type = 'left'; } return type; } // ------------------------------------------------------------------------- // ---------------------- image animation ---------------------------------- // ------------------------------------------------------------------------- this.refreshOrderSlideList = function() { // enleve le premier div de la liste et ajoute un nouveau à la fin this.orderSlideListe[0].div.style.zIndex = -2; this.orderSlideListe.shift(); this.currentSlide += 1; if(this.currentSlide == this.slideshowImages.length) {this.currentSlide=0 }; this.currentElement = this.slideshowImages[this.currentSlide]; this.orderSlideListe[2] = this.currentElement; this.orderSlideListe[1].div.style.zIndex = 1; this.orderSlideListe[0].div.style.zIndex = 0; } this.refreshOrderSlideListInvert = function() { // tri de la liste inversée this.orderSlideListe[0] = this.orderSlideListe[1]; this.orderSlideListe[1] = this.orderSlideListe[2]; this.currentSlide -= 1; if(this.currentSlide == -1) {this.currentSlide = this.slideshowImages.length-1}; this.currentElement = this.slideshowImages[this.currentSlide]; this.orderSlideListe[2] = this.currentElement; this.orderSlideListe[1].div.style.zIndex = 1; this.orderSlideListe[0].div.style.zIndex = 0; } this.manageSlides = function(sens) { // @sens bool if(sens){ this.refreshOrderSlideListInvert(); }else { this.refreshOrderSlideList(); } this.currentElement.div.style.zIndex = 2; this.animateSlide(this.currentElement.sliding, this.currentElement.div, this.slideHeight, this.currentElement.animationPas, this.currentElement.animationProgress); } this.animateSlide = function(type, div, pos, pas, timing) { // @type top,bottom,left,right // @div the current div image // @pos the position in pixel // @pas the pas of progress // @timing the delay if(pos <= 0){ eval('div.style.'+type +' = "0px"'); this.launchTextAnimation(); } else { eval('div.style.'+type +' = "'+pos+'px"'); this.animateTimeout = window.setTimeout(function() { _self.animateSlide(type, div, pos-pas, pas, timing); },timing); } } // ------------------------------------------------------------------------- // ---------------------- texte animation ---------------------------------- // ------------------------------------------------------------------------- this.launchTextAnimation = function() { var div_text = this.currentElement.divText; var type = this.returnType(); div_text.style.cssFloat = this.currentElement.textPosition; div_text.style.top = this.currentElement.textTop+'px'; eval('div_text.style.'+type+' = "'+div_text.offsetWidth+'px"'); this.animateText( div_text, type, div_text.offsetWidth, this.currentElement.animationTextPas, this.currentElement.animationTextProgress); } this.animateText = function(div_text, type, pos, pas, timing) { // @type left,right // @div_text the current div text // @pos the position in pixel // @pas the pas of progress // @timing the delay if(pos <= 0) { eval('div_text.style.'+type+' = "0px"'); if(this.flagSliding) { this.animeTextTimeout = window.setTimeout(function(){ _self.hideDivText(div_text, type); }, this.slideChangeDelay); } }else { eval('div_text.style.'+type+' = "'+pos+'px"'); this.timeOutText = window.setTimeout(function(){ _self.animateText(div_text, type, pos-pas, pas, timing); }, timing); } } this.hideDivText = function(div, type) { // @type left,right // @div the current div text eval('div.style.'+type+' = "9999px"'); if(this.flagSliding) { this.manageSlides(); } } // ------------------------------------------------------------------------- // ---------------------- creation slideshow ------------------------------- // ------------------------------------------------------------------------- this.createSlideshow = function() { var divContainer = document.getElementById(this.slideContentDiv); divContainer.style.width = this.slideWidth+'px'; divContainer.style.height = this.slideHeight+'px'; divContainer.style.margin = 'auto'; divContainer.style.overflow = 'hidden'; divContainer.style.position = 'relative'; divContainer.setAttribute('onmouseover', this.name+'.mouseOverCb()'); divContainer.setAttribute('onmouseout', this.name+'.mouseOutCb()'); for(var i in this.slideshowImages) { var element = this.slideshowImages[i] var container = document.createElement('div'); container.style.width = this.slideWidth+'px'; container.style.height = this.slideHeight+'px'; container.style.zIndex = -2; container.style.position = 'absolute'; container.style.backgroundImage = 'url("'+element.url+'")'; container.className = 'slideshow-img'; var div_text = document.createElement('div'); div_text.className = 'content-text pos-'+element.textPosition; div_text.innerHTML = '<div class="back-trans"></div>'+element.text; container.appendChild(div_text); divContainer.appendChild(container); this.slideshowImages[i].div = container; this.slideshowImages[i].divText = div_text; } divContainer.appendChild(this.createPlayer()); // chargement de la liste de reference des slideimage.(3 necessaires,zIndex) this.orderSlideListe = [ this.slideshowImages[this.slideshowImages.length-2], this.slideshowImages[this.slideshowImages.length-1], this.slideshowImages[0], ]; this.currentElement = this.slideshowImages[0]; this.currentElement.div.style.zIndex = 2; this.launchTextAnimation(); } // ------------------------------------------------------------------------- // ---------------------- slideshow callbacks ------------------------------ // ------------------------------------------------------------------------- this.mouseOverCb = function() { this.lecteur.style.top = this.slideHeight - 22 +'px'; } this.mouseOutCb = function() { this.lecteur.style.top = this.slideHeight - 2 +'px'; } // ------------------------------------------------------------------------- // ---------------------- creation player ---------------------------------- // ------------------------------------------------------------------------- this.createPlayer = function() { this.lecteur = document.createElement('div'); this.lecteur.className = 'lecteurSlideShow'; this.lecteur.style.marginLeft = (this.slideWidth / 2) - 70 +'px'; this.lecteur.style.top = this.slideHeight - 2 +'px'; this.playButton = document.createElement('div'); this.playButton.className = 'triangle triangle-play'; this.playButton.setAttribute('onclick', this.name +'.playerPlayClickedCb(this)'); this.lecteur.appendChild(this.playButton); var contain_double = document.createElement('div'); contain_double.className = 'container-double'; var triangle = document.createElement('div'); triangle.className = 'triangle triangle-gauche'; contain_double.appendChild(triangle); var second_triangle = document.createElement('div'); second_triangle.className = 'triangle triangle-gauche second-triangle-gauche'; contain_double.appendChild(second_triangle); contain_double.setAttribute('onclick', this.name +'.playerPrecedentClickedCb()'); this.lecteur.appendChild(contain_double); var contain_double = document.createElement('div'); contain_double.className = 'container-double'; contain_double.style.left = '10px'; var triangle = document.createElement('div'); triangle.className = 'triangle triangle-droit'; contain_double.appendChild(triangle); var second_triangle = document.createElement('div'); second_triangle.className = 'triangle triangle-droit second-triangle-droit'; contain_double.appendChild(second_triangle); contain_double.setAttribute('onclick', this.name +'.playerSuivantClickedCb()'); this.lecteur.appendChild(contain_double); return this.lecteur; } // ------------------------------------------------------------------------- // ---------------------- player callbacks --------------------------------- // ------------------------------------------------------------------------- this.playerPlayClickedCb = function(div) { // @div the div of play button if(this.flagSliding) { window.clearTimeout(this.animeTextTimeout); window.clearTimeout(this.timeOutText); this.flagSliding = false; div.style.borderLeft = '12px solid red'; }else { this.flagSliding = true; div.style.borderLeft = '12px solid green'; this.hideDivText(this.currentElement.divText, this.returnType()); } } this.playerSuivantClickedCb = function(flag) { // @flag bool sens of sort window.clearTimeout(this.timeOutText); window.clearTimeout(this.animeTextTimeout); if(this.flagSliding) { this.playerPlayClickedCb(this.playButton); } this.hideDivText(this.currentElement.divText, this.returnType()); this.manageSlides(flag); } this.playerPrecedentClickedCb = function() { this.playerSuivantClickedCb(true) } } /* END JAVASCRIPT */ /* HTML (slideshow.html) */ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head> <meta content="text/html; charset=UTF-8" http-equiv="content-type"> <script src="slideshow.js" type="text/javascript"></script> <link href="slideshow.css" rel="stylesheet" type="text/css" /> <title>Ansuz Slideshow</title> <script type="text/javascript"> /* reference pour une image -------------------------------------------------------------------------------- { url:'visuel_1.jpg', sliding: 'top/bottom/left/right', text: 'Le texte', textPosition: 'left/right', textTop: '70', => position du texte par le haut en pixel animationPas:'10', => le nombre de pixel à chaque itérations, en pixel animationProgress:'50', => itération en ms animationTextPas:'5', => le nombre de pixel à chaque itérations, en pixel animationTextProgress:'5', => itération en ms } --------------------------------------------------------------------------------
  • /
var listeImages = [ { url:'visuel_1.jpg', sliding: 'top', text: 'Visitez nos cotes sauvages', textPosition: 'left', textTop: '70', animationPas:'10', animationProgress:'50', animationTextPas:'5', animationTextProgress:'5', }, { url:'visuel_2.jpg', sliding:'bottom', text:'Nos falaises remarquables', textPosition:'left', textTop:'20', animationPas:'10', animationProgress:'50', animationTextPas:'5', animationTextProgress:'5', }, { url:'visuel_3.jpg', sliding:'top', text:'Protégée du grand large', textPosition:'right', textTop:'100', animationPas:'10', animationProgress:'50', animationTextPas:'5', animationTextProgress:'5', }, { url:'visuel_4.jpg', sliding:'bottom', text:'Notre lagon de mer turquoise', textPosition:'left', textTop:'100', animationPas:'10', animationProgress:'50', animationTextPas:'5', animationTextProgress:'5', }, { url:'visuel_5.jpg', sliding:'top', text:'Sans oublier nos plages de sables fin<br>et nos filles dénudées !', textPosition:'right', textTop:'20', animationPas:'10', animationProgress:'50', animationTextPas:'5', animationTextProgress:'5', }, ]; var monSlideshow = new ClassSlideshow(); monSlideshow.slideshowImages = listeImages; monSlideshow.name = 'monSlideshow'; //indiquer nom de la var utiliser pour la class monSlideshow.slideHeight = 150; monSlideshow.slideWidth = 700; monSlideshow.slideChangeDelay = 3000; // 3 secondes entre chaque image monSlideshow.slideContentDiv = 'slideshow'; //la div contenant le slideshow if (window.attachEvent) { window.attachEvent("onload", monSlideshow.createSlideshow()); } else { window.onload = function() { monSlideshow.createSlideshow(); } } </script> </head> <body> <br> <div id="slideshow"> </div> </body></html> /* END HTML */

Conclusion :


Version actuelle: 3 (code ci-dessus version 1)
L'archive en PJ contient des images pour pouvoir tester de suite ;)
Je n'ai pas essayé sous IE (le player est en CSS, et les border transparent sous ie, je sais pas...!), si qql'un peut me donner un retour à ce sujet ?
Toutes critiques bienvenues, je ne suis pas expert en javascript (ni en autre choses d'ailleurs !)

Thx,

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

@karamel
Messages postés
1743
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
16 janvier 2020
52 -
bonjour

j'ai essayé de rajouter un deuxieme diapo pour ce j'ai cree un deuxieme div avec un id different et dans la declaration des variables j'ai modifier la ligne du name et du div conteneur et les deux diapo son cree mais seul le deuxieme marche

sinon je trouve ca pas mal, ca donne bien, c'est bien codé et commenté
ansuzpeorth
Messages postés
4
Date d'inscription
jeudi 7 octobre 2010
Statut
Membre
Dernière intervention
23 avril 2012
-
Bjr,
Je rie, je rie, mais ca doit être très désagréable :)
J'ai eu la même blague, et il m'a fallu un moment pour trouver ...
Tu utilises la même liste d'objet images pour les 2 diapo. Fait une copie avec un autre nom, et ca passe !

Par contre, je comprends pas pourquoi ? Les div sont bien crées, au bonne endroit, les 2 class sont bien appelés à chaque itération, mais les div s'animent autour du dernier diapo !!! Les objets en JS m'ont l'air d'être particuliers. C'est pas comme ça en python par exemple, on peut réutiliser un même objet plusieurs fois, ils sont bien référencés différent, ici, c'est un peu le bordel. Mais peut être cela vient d'une erreur dans mon code, mais j'ai pas trouvé (j'ai tout tracé qd j'étais confronté à ce soucis)!

Sinon, merci pour les compliments et la note (euh 8 ... pourquoi pas plus :D), bien que les commentaires soient plutot inexistants (pas vraiment utile non plus pour ce bout de code). Pour la qualité du code, je te laisse seul juge ...(mais ca ne me conviens pas encore, qqles répétitions de ligne, je pourrais structuré mieux le tout et il y a surement des raccourci que je ne connais pas encore en JS)

J'ai amélioré un peu le truc depuis, j'ai ajoute le fondu, texte et image, le positionnement du texte (left ou right, pour surcharger le css) et un delai d'apparition du texte (maintenant que la structure est en place, c'est facile d'ajouter des trucs ...).
Si tu veux cette version, je mettrais à jour ce post dans les jours a venir, sinon, tu m'envois un mail, je te l'envoi en retour.

J'ai dans l'idée, en partant de ce principe, de faire un peu prêt la même, mais avec un nombre indéfini de div. Un peu genre animation flash, chaque slide aura autant de frame (div) qu'il veut, mais bon, si j'ai le temps (pour le coup, jquery sera nécessaire je pense, enfin, ca sera plus simple et surtout l'occasion de m'y mettre un peu ... Hop, un projet dans le #~TODO)

PS: tu auras surement remarqué, on peut mettre du html pour le texte, donc div ou autre image.
PS2: sous IE ca passe ? Je peux pas tester, j'ai essayé ie sous wine, javascript passe po ...
@karamel
Messages postés
1743
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
16 janvier 2020
52 -
j'ai pas mis plus a cause justement du default quand a la creation de plusieurs diapo et aussi j'ai noté une erreur pour l'ajout de l'evenements onload

soit on met

window.onload = function() {
monSlideshow.createSlideshow();
}
qui fait partie du dom level 1 compatible avec tous les navigateurs mais le probleme avec cette facon c'est que si il y a sur la page un autrte onload il sera écrasé

l'autre méthode qui n’écrasera pas les autres événements c'est attacheEvent pour ie <9 et la méthode standard addeEventlistener pour les autres navigateurs ce qui donne

if(typeof window.addEventListener != 'undefined'){
window.addEventListener('load', monSlideshow.createSlideshow, false);
}
else {
window.attachEvent("onload", monSlideshow.createSlideshow);
}

pour ie j' ai testé et sa ne marche pas apparement c'est du au fait que quand l'instance est cree et les objets initialisé la div conteneur n'existe pas j'ai donc cree une fonction init qui est lancé via onload afin que l'initialisation des elements se face apres la creation de la page et a la fin de la fonction j'appel la fonction monSlideshow.createSlideshow mais sa ma reporter un autre probleme qui est la non reconnaissance du this

mais bon j'admet que ce n'etait pas tres important
ansuzpeorth
Messages postés
4
Date d'inscription
jeudi 7 octobre 2010
Statut
Membre
Dernière intervention
23 avril 2012
-
* j'ai pas mis plus *
Euh, c'était de l'humour, et puis qd on voit tes sources, je me dit qu'un 8 venant de toi, c'est pas mal !

* a cause justement du default quand a la creation de plusieurs diapo *
Ben je sais pas si c'est un défaut, ou alors un défaut JS. J'étais parti sur l'idée, que de toute façons, si on mets plusieurs slideshow sur une page, ca ne sera pas les mêmes images, donc pas la même liste !

* j'ai noté une erreur pour l'ajout de l'evenements onload *
Vi, merci de le souligner.
J'ai modifié comme tu le préconisais, mais ca marche plus pour le coup (l'event est appelé avant la création du code html, ou du moins au début, donc la div conteneur n'est pas encore créée). J'avais lu, je ne sais plus où, qu'il y avait justement des differences selon les navigateurs sur le onload (certains lancent apres chargement, d'autres au début ...on n'est bien avancé avec tout çà ...)

Pour y remédier, on peut appeller l'instance dans le code html.




<script type="text/javascript">
monSlideshow.createSlideshow()
</script>
Mais a ce moment là; autant que je refasse comme j'avais commencé, document.write, et appeler l'instance JS dans le html. Mais je trouvais pas ça très propre ! AU moins, dans ce cas là, il n'y a plus de soucis de navigateur, de load ou onload ...

Une chtite question, outerHTML n'est pas limité à certains navigateurs ? (tjrs ce IE de m... qui ne respecte pas le w3c). A ce moment là, je ferais comme au début, document.write (à moins que ce ne soit pas conseillé ???)

* mais bon j'admet que ce n'etait pas tres important *
Je trouve que si qd même ! Certes, on l'aura compris, je suis pas fan de Windows, mais bon, c'est la majorité des OS en circulation, donc il faut proposer des choses compatibles, même pour la boite à bug et son Super navigateur IE ...

En tout cas, merci pour les conseils et critiques ;)

PS: J'ai ajouté des effets, fondu et growing, nettoyé le code, j'avais aussi modifier pour pouvoir ajouter facilement des effets, mais ca fait bcp de code en plus pour chaque animation ajouté, pour finalement pas grand choses en plus, le but n'était pas de faire une usine à gaz, à l'origine ... Pour faire un truc plus complexe, jquery serait nécessaire, amha !
Comme tu es admin ici, penses-tu que je doivent créer un nouveau sujet, ou modifier celui ci ? Ou simplement dans les commentaires donner un lien vers la nouvelle version ?
cs_arta
Messages postés
98
Date d'inscription
dimanche 22 janvier 2006
Statut
Membre
Dernière intervention
24 juillet 2013
-
Bonjour tous

Un lien avec un exemple ??? ;)

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.