le défilement automatique dans jQuery.scrollTo/jQuery.serialScroll fonctionne comme un fou

J'ai utilisé le tutoriel suivant pour faire un curseur de contenu parallaxe pour mon webiste: http://blog.themeforest.net/tutorials/create-a-funky-parallax-background-effect-using-jquery/le défilement automatique dans jQuery.scrollTo/jQuery.serialScroll fonctionne comme un fou

Je l'ai bien travailler, mais voulait ajouter le défilement automatique fonctionnalité. Je l'ai fait en ajoutant jQuery.serialScroll et en utilisant setInterval mais ça marche comme un fou maintenant. Je suppose que le curseur passe maintenant toutes les 3 diapos toutes les 5 secondes, au lieu de 1 diapositive par 5 secondes. Je n'ai aucune idée de comment le faire fonctionner correctement.

Voici une partie de mon HTML:

<body> 
<div id="header"> 
    <h1 id="logo">Testing slider</h1> 
</div> 
<!-- end logo --> 

<div id="slider"> 
    <div id="background"> 
     <div id="bg"> 
     </div> 
    </div> 
    <!-- end slide background --> 

    <div id="wrapper"> 
     <ul id="mask"> 
      <li id="box1" class="box"> 
       <a name="box1"><img src="images/slide1.png"></a> 
       <div class="content"> 
        <div class="inner"> 
        </div> 
       </div> 
      </li> 
      <!-- end box1 --> 

      <li id="box2" class="box"> 
       <a name="box2"><img src="images/slide2.png"></a> 
       <div class="content"> 
        <div class="inner"> 
        </div> 
       </div> 
      </li> 
      <!-- end box2 --> 

      <li id="box3" class="box"> 
       <a name="box3"><img src="images/slide3.png"></a> 
       <div class="content"> 
        <div class="inner"> 
        </div> 
       </div> 
      </li> 
      <!-- end box3 --> 

     </ul> 
     <!-- end mask --> 

    </div> 
    <!-- end wrapper --> 

</div> 
<!-- end Slider --> 

<div id="content"> 
    <div id="menu"> 
     <ul id="menuitem"> 
      <li><a href="#box1" class="slide_next"></a></li> 
      <li><a href="#box2" class="slide_next"></a></li> 
      <li><a href="#box3" class="slide_next"></a></li> 
     </ul> 
    </div> 
    <!-- end menu --> 

</div> 
<!-- end content -->

Et voici le code troublant JS:

<script type="text/javascript"> 
$(document).ready(function() { 
    $('a.slide_next').click(function() { 
     $('#wrapper').scrollTo($(this).attr('href'), 800); 
     setPosition($(this).attr('href'), '#background', '0px', '50px', '100px') 
     $('a.slide_next').removeClass('selected'); 
     $(this).addClass('selected'); 
     return false; 
    }); 
}); 

     setInterval(function() {$('a.slide_next').click()}, 5000); 

function setPosition(check, div, p1, p2, p3) { 
if(check==='#box1') 
    {   $(div).scrollTo(p1, 800);  } 
else if(check==='#box2') 
    {   $(div).scrollTo(p2, 800);  } 
else 
    {   $(div).scrollTo(p3, 800);  } 
}; 



</script>

S'il vous plaît, quelqu'un a une idée de comment le faire fonctionner la comme il devrait être (1 diapositive chaque 5 sec)?

PS. S'il vous plaît soyez gentil, je suis nouveau dans le domaine;)

Source

2010-09-19 kecup

Je pense que votre problème est que vous déclenchez l'événement click sur TOUS 3 de vos liens "diapositive suivante" toutes les 5 secondes, donc il va wappy essayant de exécutez votre code onclick pour chaque diapositive.

Ce que vous pouvez faire est quelque chose comme ceci:

//set a global var to keep track of the slide we're on 
window.slide = 1 
function nextSlide(){ 
    //increase window.slide by 1 (to go to the next slide), 
    //or if it is 3 return to the first slide 
    window.slide == 3 ? window.slide = 1 : window.slide++; 
    //trigger click event on the NEXT slide only 
    $('a[href=#box'+window.slide+']').click() 
} 
setInterval(nextSlide,5000);

De cette façon, toutes les 5 secondes, l'événement, cliquez sur le lien pour passer à la diapositive suivante sera déclenchée (et pas tous).

Espérons que cela aide!

Source

2010-09-28 07:33:02 machinemessiah

Cela fonctionne très bien. Merci beaucoup! Toutefois, le défilement automatique fonctionne indépendamment du défilement à l'aide de liens avec la classe "slide_next". – kecup

Merci pour cette bonne méthode. – Echilon

le défilement automatique dans jQuery.scrollTo/jQuery.serialScroll fonctionne comme un fou

Répondre

Questions connexes