bonjour,
voici le script de ma page contenant un carrousel. Le problème est qu'il n'y a pas d’animation qui se créée et n'étant pas très doué en java, je ne vois pas où est le problème.
Si l'un d'entre vous pouvez m'expliquer d'où le problème vient ça serait génial.
merci beaucoup de votre aide
sébastien
Modifié par 6l20 (25 May 2014 - 10:30)
voici le script de ma page contenant un carrousel. Le problème est qu'il n'y a pas d’animation qui se créée et n'étant pas très doué en java, je ne vois pas où est le problème.
<head>
<title>Sébastien Lerouge</title>
</head>
<body style="color:white ; font-size:1.2em ; background:black"><p xml:lang="fr">
<body style="background:black"/>
<header>
<img src="../images/logo_site_1.jpg" style="width:100%" />
</header>
<nav style="float:left">
<ul>
<li><a href="index.html">Page d'Acceuil</a></li>
<li><a href="arthur.html">Bibliothèque d'Arthur</a></li>
<li><a href="page_video.html">Bibliothèque Vidéo</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<aside style="color:red ; float:right ; font-size:1.2em ; width:200px; border:solid">
<p xml:lang="fr">Sur cette partie du site vous trouverez toutes les photos de Sébastien. </p>
<img src="../images/IMGP3153.jpg" style="width:200px"/>
</aside>
<section align="center"; class="slider">
<div id="carousel">
<div id="slides-wrapper">
<div class="slide">
<img src="../images/s1.jpg" style="width:40%" />
<h2>Slide 1</h2>
</div>
<div class="slide">
<img src="../images/s2.jpg" style="width:40%" />
<h2>Slide 2</h2>
</div>
<div class="slide">
<img src="../images/s3.jpg" style="width:40%" />
<h2>Slide 3</h2>
</div>
<div class="slide">
<img src="../images/s4.jpg" style="width:40%" />
<h2>Slide 4</h2>
</div>
<div class="slide">
<img src="../images/s5.jpg" style="width:40%" />>
<h2>Slide 5</h2>
</div>
<div class="slide">
<img src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-frc1/t1.0-9/1003158_4452331326239_109970751_n.jpg" style="width:40%" />
<h2>Slide 6</h2>
</div>
<div class="slide">
<img src="../images/s7.jpg" style="width:40%" />
<h2>Slide 7</h2>
</div>
<div class="slide">
<img src="../images/s8.jpg" style="width:40%" />
<h2>Slide 8</h2>
</div>
</div>
</div>
<script type="text/CSS">
#carrousel{
position:relative;
height:200px;
width:700px;
margin:auto;
}
#carrousel ul li{
position:absolute;
top:0;
left:0;
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></SCRIPT>
<SCRIPT language="JavaScript">
$(document).ready(function(){
var $carrousel = $('#carrousel'), // on cible le bloc du carrousel
$img = $('#carrousel img'), // on cible les images contenues dans le carrousel
indexImg = $img.length - 1, // on définit l'index du dernier élément
i = 0, // on initialise un compteur
$currentImg = $img.eq(i); // enfin, on cible l'image courante, qui possède l'index i (0 pour l'instant)
$img.css('display', 'none'); // on cache les images
$currentImg.css('display', 'block'); // on affiche seulement l'image courante
$carrousel.append('<div class="controls"> <span class="prev">Precedent</span> <span class="next">Suivant</span> </div>');
$('.next').click(function(){ // image suivante
i++; // on incrémente le compteur
if( i <= indexImg ){
$img.css('display', 'none'); // on cache les images
$currentImg = $img.eq(i); // on définit la nouvelle image
$currentImg.css('display', 'block'); // puis on l'affiche
}
else{
i = indexImg;
}
});
$('.prev').click(function(){ // image précédente
i--; // on décrémente le compteur, puis on réalise la même chose que pour la fonction "suivante"
if( i >= 0 ){
$img.css('display', 'none');
$currentImg = $img.eq(i);
$currentImg.css('display', 'block');
}
else{
i = 0;
}
});
function slideImg(){
setTimeout(function(){ // on utilise une fonction anonyme
if(i < indexImg){ // si le compteur est inférieur au dernier index
i++; // on l'incrémente
}
else{ // sinon, on le remet à 0 (première image)
i = 0;
}
$img.css('display', 'none');
$currentImg = $img.eq(i);
$currentImg.css('display', 'block');
slideImg(); // on oublie pas de relancer la fonction à la fin
}, 7000); // on définit l'intervalle à 7000 millisecondes (7s)
}
slideImg(); // enfin, on lance la fonction une première fois
});
</script>
</section>
</body>
<footer style="clear:both ; color:white"><p xml:lang="fr">
</footer> Si l'un d'entre vous pouvez m'expliquer d'où le problème vient ça serait génial.
merci beaucoup de votre aide
sébastien
Modifié par 6l20 (25 May 2014 - 10:30)
