je voudrais créer une bannière d'image avec deux boutons ,entièrement en javascript sans Jquery, est-ce possible.
les deux boutons permettent de passer d'une image à une autre.
j'ai entamer un bout de code , mais ça ne marche pas.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<script type="text/javascript">
function generale(){
//function qui affiche l'image précédente
function bannierep(){
var img =document.querySelectorAll('img');
imgl =img.length;
var precedent;
precedent=img.length;
for(var i = 0; i < imgl; i++){
}
}
//function qui affiche l'image suivante
function bannieres(){
var img =document.querySelectorAll('img');
imgl =img.length;
var image =document.getElementById('img2');
for(var i = 0; i < imgl; i++)
{
if(image.style.zIndex== "7"){
image.style.zIndex= "0";}
else{ image.style.zIndex= "7"; }
}
}
//ce code ne marchera pas par ce que la balise avec le id bouton_suivant est en bas , la fonction windows.onload est alors obligatoir
var evenement= document.getElementById('bouton_precedent'),
evenement2 = document.getElementById('bouton_suivant');
evenement.addEventListener('click', function() {
alert('je suis un l\'evenement n°1');
bannierep();}, false);
evenement2.addEventListener('click', function(){
alert('je suis un l\'evenement n°2');
bannieres();},false);
}window.onload = generale;
</script>
<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
</head><body>
<header></header>
<div id="block">
<h2 id="center">création d'un block avec des images </h2>
<div id="blockimage2">
<div id="conteuneur2">
<div id="bouton_precedent"/>.</div>
<div id="bimage"><img id="img2" src="images/image1.jpeg"/></div>
<div id="bimage"><img id="img2" src="images/image2.jpg"/></div>
<div id="bimage"><img id="img2" src="images/image3.png"/></div>
<div id="bimage"><img id="img2" src="images/image4.jpg"/></div>
<div id="bimage"><img id="img2" src="images/image5.png"/></div>
<div id="bimage"><img id="img2" src="images/image4.jpg"/></div>
<div id="bimage"><img id="img2" src="images/image5.png"/></div>
<div id="bimage"><img id="img2" src="images/image5.png"/></div>
<div id="bouton_suivant">.</div>
</div>
</div>
</div>
</body>
</html>
SVP j'ai vraiment besoin d'aide.
Merci d'avance pour vos réponses.
le facteur du développement est le partage du savoirs
Merci beaucoup pour votre aide , je vais de suite essayer cette solution, et je te tiens au courant.
A+
le facteur du développement est le partage du savoirs
bannière slider entièrement en javascript
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
le facteur du développement est le partage du savoirs
le facteur du développement est le partage du savoirs