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,
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.