Bonjour,
Actuellement je test des slider sur mon ancien forum de test mais j'ai un gros soucis, j'ai enfin fini.
Je vous mets le code mais d'abord je vous donne le forum sur lequel je fais mes tests, vous trouverez le slider tout en bas des pages
http://naruto-xd.com/index.php
Comme cous pouvez le constater, les images sont un peu décaler les unes des autres.
Voici le code source du slider
Je vous remercie de votre compréhension.
Actuellement je test des slider sur mon ancien forum de test mais j'ai un gros soucis, j'ai enfin fini.
Je vous mets le code mais d'abord je vous donne le forum sur lequel je fais mes tests, vous trouverez le slider tout en bas des pages
http://naruto-xd.com/index.php
Comme cous pouvez le constater, les images sont un peu décaler les unes des autres.
Voici le code source du slider
<!DOCTYPE html>
<!-- saved from url=(0062)file:///C:/Users/Soulouf/Videos/SlideShow_BDW/without-box.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Slider en CSS3 et JS</title>
<style>
<style>
*{
padding:0;
margin:0;
list-style-type:none;
}
#slider{
background:url('resources/background.png');
width:960px;
height:370px;
margin:50px auto;
position:relative;
}
#mask{
width:100%;
height:100%;
position:absolute;
overflow:hidden;
}
.fleche{
position:absolute;
top:145px;
cursor:pointer;
}
#fleche_gauche{
left:-17px;
}
#fleche_droite{
right: -17px;
}
#image_container{
position:absolute;
width:400%;
height:100%;
/* La transition sur tout les navigateurs */
/* Chrome */
-webkit-transition-property:all;
-webkit-transition-duration:1s;
/* Firefox */
-moz-transition-property:all;
-moz-transition-duration:1s;
/* Opera */
transition-property:all;
transition-duration:1s;
}
/* Les différentes positions du slider */
.image1 #image_container{
left:0;
}
.image2 #image_container{
left:-100%;
}
.image3 #image_container{
left:-200%;
}
.image4 #image_container{
left:-300%;
}
/* Les images */
#image_container li{
float:left;
}
/* L'encart Bleu */
#encart{
position:absolute;
top:-15px;
left:200px;
background:url('resources/text.png');
width:328px;
height:396px;
}
#bouton{
position:relative;
width:244px;
height:55px;
margin: 300px 0px 0px 40px;
cursor:pointer;
}
/* Les points de navigation */
#dots{
position:absolute;
width:130px;
height:15px;
left:425px;
bottom:-25px;
}
/* les points, avec leur background non selectionné */
#dots li{
float:left;
margin: 0px 2px;
width:12px;
height:12px;
background: url('resources/empty-dot.png');
cursor:pointer;
}
/* Point au survol */
#dots li:hover{
background: url('resources/selected-dot.png');
}
/* Point "selectionné". De la même manière que l'image, on change en fonction de la classe de slider */
.image1 #dots li.button1, .image2 #dots li.button2, .image3 #dots li.button3, .image4 #dots li.button4{
background: url('resources/selected-dot.png');
cursor:normal;
}
/* Un eyecandy */
#glass{
position:absolute;
top:0px;
left:0px;
}
</style>
<div id="slider" class="image2">
<div id="mask">
<ul id="image_container">
<li><img src="http://img90.xooimage.com/files/f/e/f/bird-3a83f4e.jpg"></li>
<li><img src="http://img92.xooimage.com/files/4/5/8/red_bird-3a83e81.jpg"></li>
<li><img src="http://img93.xooimage.com/files/1/9/7/spring-3a83e8b.jpg"></li>
<li><img src="http://img90.xooimage.com/files/8/a/5/winter-3a83ea0.jpg"></li>
</ul>
</div>
<img src="http://img93.xooimage.com/files/d/a/0/glass-3a83e72.png" id="glass">
<!-- l'encart bleu. Quoter s'il est genant --><!--
<div id="encart">
<img src="resources/bouton.png" id="bouton">
</div>-->
<!-- fin de l'encart -->
<!-- Les fleches de navigations -->
<ul id="dots">
<!-- les petits points qui affichent ou nous en somme sur le slide -->
<li class="button1" onclick="changeImage(1)"></li>
<li class="button2" onclick="changeImage(2)"></li>
<li class="button3" onclick="changeImage(3)"></li>
<li class="button4" onclick="changeImage(4)"></li>
</ul>
<img src="http://img91.xooimage.com/files/8/0/6/fleche-droite-3a84189.png" id="fleche_gauche" class="fleche" onclick="prevImage()">
<img src="http://img94.xooimage.com/files/7/0/f/fleche-gauche-3a8419d.png" id="fleche_droite" class="fleche" onclick="nextImage()">
</div>
<script>
// Des Variables pour pouvoir modifier facilement ce qui doit l'être
var secDuration = 5;
var image = 1;
var maxImages = 4;
var slider = document.getElementById('slider');
var timeout
// La fonction qui change les images. Peut pointer vers une image spécifique, ou bien être appelée vide, pour passer ç celle d'apres
function changeImage(requiredImage) {
// Début de l'algorithme .
if (!requiredImage && requiredImage != 0){ //Si nous n'avons pas spécifié une image
if(image < maxImages){// Si l'image n'est pas la dernière, on avance d'une image
image++;
}
else{
image = 1;//Si Nous sommes sur la dernière, on reviens au début
}
}
else{ // Si nous avont spécifié une image
if(requiredImage > maxImages){//Si nous avont spécifié une image au dela de la dernière, on revient à la première
image = 1;
}
else if(requiredImage < 1){ //Si nous avont spécifié une image 0 ou moins, on vas à la dernière image
image = maxImages;
}
else{
image = requiredImage; // Sinon, on vas à l'image spécifiée.
}
}
//On dis au slider à travers sa classe quel image il doit afficher
slider.className = "image"+image;
// On nettoie et relance le timeout
clearTimeout(timeout)
timeout = setTimeout("changeImage()",secDuration*1000);
}
//Deux petites fonctions tres compréhensibles
function nextImage(){
changeImage(image+1);
}
function prevImage(){
changeImage(image-1);
}
//On met le slide sur l'image par défaut, ici la 1ere
changeImage(1);
Je vous remercie de votre compréhension.