Bonjour tout le monde, je suis en train de réaliser un slider pour un site web, je me suis inspiré de ce tuto: http://www.htmldrive.net/items/show/6/Automatic-Image-Slider-with-CSS-jQueryred.html, seulement les animations ne fonctionne pas et les liens de pagination (1 2 3) ne fonctionne pas, je vous copie colle mon code.
EDIT: après avoir ouvert le code source avec chrome, il m'indique Uncaught ReferenceError: active is not defined(repeated xxxxx times) (a l'infini le xxxxx). j'ai ce message entre la ligne 31 et 32 de mon code Js !
HTML:
Header.php
et pour finir mon JavaScript !
toute la partie "affichage" de mon code javascript fonctionne, c'est à partir de la mise en place de la pagination et du slide que ça ne fonctionne plus !
Si vous pouviez m'aiguiller ! Je vous en remercie d'avance !
Modifié par JahOne (04 Apr 2013 - 03:04)
EDIT: après avoir ouvert le code source avec chrome, il m'indique Uncaught ReferenceError: active is not defined(repeated xxxxx times) (a l'infini le xxxxx). j'ai ce message entre la ligne 31 et 32 de mon code Js !
HTML:
<html>
<head>
<meta charset="UTF-8" />
<title>Design Test</title>
<link rel="stylesheet" href="../css/test.css" type="text/css" />
</head>
<body>
<?php
include('header.php');
?>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/slider.js"></script>
</body>
</html>
Header.php
<header id="ban">
<img src="../images/logo1.png" alt="logo" />
</header>
<section>
<ul id="navlist">
<li>
<a href="test.php">Accueil</a>
</li>
<li>
<a href="animes.php">Animes</a>
</li>
<li>
<a href="connexion.php">Connexion</a>
</li>
<li>
<a href="inscription.php">Inscription</a>
</li>
</ul>
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="http://www.mangamemore.tk/display_anime.php?id=30"><img src="../images/scrollbanangelbeats.jpg" alt="image 1"></a>
<a href="#"><img src="../images/scrollbandeadmanwonderland.jpg" alt="image 2"></a>
<a href="#"><img src="../images/scrollbanschoolrumble.jpg" alt="image 3"></a>
</div>
</div>
<div class="paging">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
</div>
</div>
</section>
et pour finir mon JavaScript !
$(document).ready(function(){
//Affiche la pagination
$(".paging").show();
$(".paging a:first").addClass("active");
//initialise la taille de l'image, le nombre et détermine la taille de image_reel
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//ajuste image_reel à sa nouvelle taille
$(".image_reel").css({'width' : imageReelWidth});
//Mise en place de la pagination et du slide
rotate = function(){
var triggerID = $active.attr("rel") - 1;
var image_reelPosition = triggerID * imageWidth;
$(".paging a").removeClass('active');
$active.addClass('active');
$(".image_reel").animate({
left: -image_reelPosition
}, 500);
};
//Rotation & Timing Event
rotateSwitch = function(){
play = setInterval(function(){
$active = $('.paging a.active').next();
if (active.length === 0) {
$active = $('.paging a:first');
}
rotate();
}, 7000);
};
rotateSwitch();
//si Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Arretes la rotation
}, function() {
rotateSwitch(); //Reprends le Timer
});
//si click
$(".paging a").click(function() {
$active = $(this); //lance la pagination cliquée
//Relance le Timer
clearInterval(play);
rotate();
rotateSwitch();
return false;
})
});toute la partie "affichage" de mon code javascript fonctionne, c'est à partir de la mise en place de la pagination et du slide que ça ne fonctionne plus !
Si vous pouviez m'aiguiller ! Je vous en remercie d'avance !
Modifié par JahOne (04 Apr 2013 - 03:04)