Image Slider Jquery RESolu, 3ème slide ne s'affiche pas |
Bienvenue invité ( Connexion | Inscription )
Image Slider Jquery RESolu, 3ème slide ne s'affiche pas |
24 Oct 2011, 16:22
Message
#1
|
|
Ceinture blanche OSC Groupe : Membres Messages : 12 Inscrit : 21-September 08 Membre no 23028 |
Bonjour,
J'essaye d'installer un caroussel en page d'accueil de ma boutique en m'inspirant de ce tutorial. *Je fais donc quelques tests et jusque là tout ce déroule à peu près bien mais j'ai un problème d'affichage avec mon troisième slide (nommé "C"): en plus de ne pas apparaitre après le slide "B", il se place en dessous du slide "A". EDIT: j'ai vérifié le rendu de la page sur un autre ordi que le mien et le problème n'apparait pas, C est bien à la suite, le caroussel fonctionne normalement pourtant voici comment la page s'affiche ICI (la bande noire étant le slide C) Voici mes codes: Code <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script>$(document).ready(function() { ////Show the paging and activate its first link $(".paging").show(); $(".paging a:first").addClass("active"); //Get size of the image, how many images there are, then determin the size of the image reel. var imageWidth = $(".window").width(); var imageSum = $(".image_reel img").size(); var imageReelWidth = imageWidth * imageSum; //Adjust the image reel to its new size $(".image_reel").css({'width' : imageReelWidth}); //Paging and Slider Function rotate = function(){ var triggerID = $active.attr("rel") - 1; //Get number of times to slide var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide $(".paging a").removeClass('active'); //Remove all active class $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) //Slider Animation $(".image_reel").animate({ left: -image_reelPosition }, 500 ); }; //Rotation and Timing Event rotateSwitch = function(){ play = setInterval(function(){ //Set timer - this will repeat itself every 5 seconds $active = $('.paging a.active').next(); //Move to the next paging if ( $active.length === 0) { //If paging reaches the end... $active = $('.paging a:first'); //go back to first } rotate(); //Trigger the paging and slider function }, 7000); //Timer speed in milliseconds (7 seconds) }; rotateSwitch(); //Run function on launch //On Hover $(".image_reel a").hover(function() { clearInterval(play); //Stop the rotation }, function() { rotateSwitch(); //Resume rotation timer }); //On Click $(".paging a").click(function() { $active = $(this); //Activate the clicked paging //Reset Timer clearInterval(play); //Stop the rotation rotate(); //Trigger rotation immediately rotateSwitch(); // Resume rotation timer return false; //Prevent browser jump to link anchor }); }); </script> Code <div class="main_view"> <div class="window"> <div class="image_reel"> <a href="#"><img src="/images/A.jpg" alt="" /></a> <a href="#"><img src="/images/B.jpg" alt="" /></a> <a href="#"><img src="/images/C.jpg" alt="" /></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> Code /*--Main Container--*/ .main_view { float: left; position: relative; } /*--Window/Masking Styles--*/ .window { height:518px; width: 700px; overflow: hidden; /*--Hides anything outside of the set width/height--*/ position: relative; } .image_reel { position: absolute; top: 0; left: 0; } .image_reel img {float: left;} /*--Paging Styles--*/ .paging { position: absolute; bottom: 410px; right: -7px; width: 150px; height:60px; z-index: 100; /*--Assures the paging stays on the top layer--*/ text-align: center; line-height: 40px; background: url(/images/baguette2.png) no-repeat; display: none; /*--Hidden by default, will be later shown with jQuery--*/ } .paging a { padding: 5px; text-decoration: none; color: #fff; } .paging a.active { font-weight: bold; border: 0px solid #610000; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; background:none; } .paging a:hover {font-weight: bold;} Merci pour votre aide Ce message a été modifié par sevastra - 25 Oct 2011, 13:18. |
|
Version bas débit | Nous sommes le : 29th March 2024 - 16:57 |
Ce site est déclaré auprès de la commision Nationale de l'Informatique et des Libertés (déclaration n°: 1043896) |