Javascript > Défilement d'image

Fermé
Kalzeur - 18 févr. 2010 à 18:27
 jen - 2 mars 2011 à 13:30
Bonjour,
J'ai trouvé un script de défilement d'image javascript sur internet, mais impossible de trouver le moyen de changer le sens pour faiire défiler le carroussel de gauche à droit et non de droite à gauche !

Voici le script >

<!-- DEBUT DU SCRIPT CARROUSEL --> <script type="text/javascript">
***********************************************
PARAMETRES DE REGLAGE
***********************************************/
// Spécifiez la largeur du diaporama (en pixel)
var sliderwidth="300px"
// Spécifiez la hauteur du diaporama (en pixel)
var sliderheight="225px"
// Spécifiez la vitesse de défilement (de 1 à 10)
var slidespeed=3
// Spécifiez la couleur du fond
slidebgcolor="#EAEAEA"
// SPECIFICATIONS DU CARROUSEL : chemin des images
// Vous pouvez rendre l'image cliquable
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://www.monessai.wifeo.com/"><img src="../images/dc3.jpg" border=1></a>'
leftrightslide[1]='<a href="http://www.monessai.wifeo.com/"><img src="../images/727.jpg" border=1></a>'
leftrightslide[2]='<a href="http://www.monessai.wifeo.com/"><img src="../images/707.jpg" border=1></a>'
leftrightslide[3]='<a href="http://www.monessai.wifeo.com/"><img src="../images/caravelle.jpg" border=1></a>'
// Spécifiez l'espace entre chaque image (se servir du HTML):
var imagegap="1"
// Spécifiez le nombre de pixels/espace entre chaque rotation du carrousel (nombre entier)
var slideshowgap=5
////NE RIEN EDITER A PARTIR D'ICI////////////
var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide
function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup
function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8 ))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"
if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8 ))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"
}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8 ))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap
if (ns_slide2.left>(actualwidth*(-1)+8 ))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}
if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script><!-- FIN DU SCRIPT CARROUSEL -->



Merci par avance de votre aide !
A voir également:

7 réponses

Utilisateur anonyme
18 févr. 2010 à 22:43
Après une petite recherche, j'ai découvert une balise HTML permettant de faire défiler du texte sur une page : marquee.
Le choix du sens est plus simple :<marquee direction="right">Texte à faire défiler"</marquee> (et ça marche aussi avec les images !)
2
Utilisateur anonyme
19 févr. 2010 à 09:51
Je ne pense pas, mais la balise est compatible avec tous les navigateurs.
2
Utilisateur anonyme
18 févr. 2010 à 19:02
Bonjour.
Pour changer la direction du caroussel, il suffi de modifier sa vitesse !
Il faut remplacer var slidespeed=3 par var slidespeed=-3
1
ah bah oui, logique, je n'y avais pas pensé, merci beaucoup, j'avoue que j'ai vraiment louppé là :p

Merci :)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Utilisateur anonyme
18 févr. 2010 à 22:08
Je m'excuse aussi pour ma réponse : le carrousel tourne dans l'autre sens, mais les images ne réapparaissent pas !
Je vais essayer de trouver le problème, mais ça risque d'être un peu long (aucun commentaires dans le script...)
0
Bonjour, avez-vous trouvé la solution? merci
0
Je m'excuse aussi pour ma réponse : le carrousel tourne dans l'autre sens, mais les images ne réapparaissent pas !
Je vais essayer de trouver le problème, mais ça risque d'être un peu long (aucun commentaires dans le script...)


Ah je n'ai pas fais attention, merci pour ton aide surtout :)

Ce n'est pas moi qui l'ai codé, je l'ai trouvé sur un site, je débute trop en JS

Après une petite recherche, j'ai découvert une balise HTML permettant de faire défiler du texte sur une page : marquee.
Le choix du sens est plus simple :<marquee direction="right">Texte à faire défiler"</marquee> (et ça marche aussi avec les images !)


Je ne connaissais pas cette balise, elle est valide pour passer au W3C avec un doctype transitional ?

Merci pour ton aide :)
0
Ah c'est bien dommage, tant pih pour la validité XHTML c'est pas pour une fois qu'on va me crier dessus :P

Merci beaucoup :)
0