JQuery Cycle - 在回調參數之前

我似乎無法弄清楚如何使用Jquery Cycle的Before回調參數。JQuery Cycle - 在回調參數之前

jQuery('#slider_accueil').cycle({ 
    fx:  'fade', 
    timeout: 5000, 
    after: onAfter, 
    before: onBefore, 
    startingSlide: 0, 
    next: '.next_btn_slider', 
    prev: '.prev_btn_slider' 
}); 

function onBefore(currSlideElement, nextSlideElement, options, forwardFlag){ 
    jQuery('.indicator').removeClass('current') 
}

我想要做的事，在未來元素的容器，但nextSlideElement發回數據的加載，並沒有它，我可以涉及到線下一個元素（在尋找某種ID的或類，我找不到）

所以這裏的問題的核心：如何使用上面的onBefore函數來滑動下一個元素？

編輯：繼承人的nextSlideElement的圖像通過console.dir(nextSlideElement)投入控制檯

enter image description here

編輯2：這裏是代碼，我想添加一個類相關的每張幻燈片的縮略圖（1 1，2 2等）

<!--Slider sur l'accueil--> 
<div id="sliderAccueil"> 

    <!--Contrôles du slider (next/previous)--> 
    <div style="display:none;"></div> 
    <img class="prev_btn_slider" src="http://www.x.com/wp-content/themes/Sandbox/images/slider_previous.png" alt="Image Précédente" /> 
    <img class="next_btn_slider" src="http://www.x.com/wp-content/themes/Sandbox/images/slider_next.png" alt="Image Suivante" /> 
    <div id="nav"></div> 

    <!--Images du slider-->     
    <div id="slider_accueil"> 


     <div style="width:778px; height:384px; overflow:hidden;"> 
      <a href="http://www.x.com/"> 

       <!--Image--> 
              <img src="http://www.x.com/wp-content/uploads/2011/09/slider1.jpg" alt="Assurer la Sécurité" /> 

       <!--Contenu rajouté--> 
       <div> 
                <div class="maintext"> 
                              <h2>Assurer la Sécurité</h2> 
                            <p>Assurer la Sécurité</p> 
                 </div> 
        <div class="link"> 
         <a href="http://www.x.com/">En savoir plus</a> 
         <a href="http://www.x.com/" class="call_slide"><img src="http://www.x.com/wp-content/themes/Sandbox/images/call_slider.png" alt="En savoir plus" /></a> 
        </div> 
               </div> 

      </a> 
     </div> 



     <div style="width:778px; height:384px; overflow:hidden;"> 
      <a href="http://www.x.com/"> 

       <!--Image--> 
              <img src="http://www.x.com/wp-content/uploads/2011/09/slider_item_bilan_travaux.jpg" alt="Bilan des travaux" /> 

       <!--Contenu rajouté--> 
       <div> 
                <div class="maintext"> 
                              <h2>Special stuff</h2> 
                            <p>Bilan des travaux</p> 
                 </div> 
        <div class="link"> 
         <a href="http://www.x.com/">En savoir plus</a> 
         <a href="http://www.x.com/" class="call_slide"><img src="http://www.x.com/wp-content/themes/Sandbox/images/call_slider.png" alt="En savoir plus" /></a> 
        </div> 
               </div> 

      </a> 
     </div> 



     <div style="width:778px; height:384px; overflow:hidden;"> 
      <a href="http://www.x.com/"> 

       <!--Image--> 
              <img src="http://www.x.com/wp-content/uploads/2011/09/slider_item_poutrelles.jpg" alt="Des travaux inusités à 300 pieds au-dessus de l’eau" /> 

       <!--Contenu rajouté--> 
       <div> 
                <div class="maintext"> 
                              <h2>Travaux</h2> 
                            <p>Des travaux inusités à 300 pieds au-dessus de l’eau</p> 
                 </div> 
        <div class="link"> 
         <a href="http://www.x.com/">En savoir plus</a> 
         <a href="http://www.x.com/" class="call_slide"><img src="http://www.x.com/wp-content/themes/Sandbox/images/call_slider.png" alt="En savoir plus" /></a> 
        </div> 
               </div> 

      </a> 
     </div> 



     <div style="width:778px; height:384px; overflow:hidden;"> 
      <a href=""> 

       <!--Image--> 
              <img src="http://www.x.com/wp-content/uploads/2011/10/slider-1961-05-05.jpg" alt="Photos d’archive" /> 

       <!--Contenu rajouté--> 
       <div> 
                <div class="maintext"> 
                              <h2 style="margin-bottom:0;">Photos d’archive</h2> 
                           </div> 
        <div class="link"> 
         <a href="">En savoir plus</a> 
         <a href="" class="call_slide"><img src="http://www.x.com/wp-content/themes/Sandbox/images/call_slider.png" alt="En savoir plus" /></a> 
        </div> 
               </div> 

      </a> 
     </div> 



     <div style="width:778px; height:384px; overflow:hidden;"> 
      <a href="http://www.x.com/"> 

       <!--Image--> 
              <img src="http://www.x.com/wp-content/uploads/2011/09/slide_reseau_sociaux.jpg" alt="Branché sur les réseaux sociaux" /> 

       <!--Contenu rajouté--> 
       <div> 
                <div class="maintext"> 
                              <h2>Réseaux Sociaux</h2> 
                            <p>Branché sur les réseaux sociaux</p> 
                 </div> 
        <div class="link"> 
         <a href="http://www.x.com/">En savoir plus</a> 
         <a href="http://www.x.com/" class="call_slide"><img src="http://www.x.com/wp-content/themes/Sandbox/images/call_slider.png" alt="En savoir plus" /></a> 
        </div> 
               </div> 

      </a> 
     </div> 


    </div><!--#slider_accueil--> 

    <!--Thumbnails contrôlant le slider--> 
    <div id="thumbnails_slider_accueil"> 

     <ul> 


      <li id="li_thumb1"> 
       <a id="thumb1" class="thumb_slider_accueil"> 
                <div class="indicator"></div> 
        <div class="thumbnail" style="background:url(http://www.x.com/wp-content/uploads/2011/09/slider1-150x150.jpg) center center"> 
         <p>Assurer la Sécurité</p> 
        </div> 
        <div class="clear"></div> 
               </a> 
      </li> 


      <li id="li_thumb2"> 
       <a id="thumb2" class="thumb_slider_accueil"> 
                <div class="indicator"></div> 
        <div class="thumbnail" style="background:url(http://www.x.com/wp-content/uploads/2011/09/slider_item_bilan_travaux-150x150.jpg) center center"> 
         <p>Bilan des travaux</p> 
        </div> 
        <div class="clear"></div> 
               </a> 
      </li> 


      <li id="li_thumb3"> 
       <a id="thumb3" class="thumb_slider_accueil"> 
                <div class="indicator"></div> 
        <div class="thumbnail" style="background:url(http://www.x.com/wp-content/uploads/2011/09/slider_item_poutrelles-150x150.jpg) center center"> 
         <p>Des travaux inusités à 300 pieds au-dessus de l’eau</p> 
        </div> 
        <div class="clear"></div> 
               </a> 
      </li> 


      <li id="li_thumb4"> 
       <a id="thumb4" class="thumb_slider_accueil"> 
                <div class="indicator"></div> 
        <div class="thumbnail" style="background:url(http://www.x.com/wp-content/uploads/2011/10/slider-1961-05-05-150x150.jpg) center center"> 
         <p>Photos d’archive</p> 
        </div> 
        <div class="clear"></div> 
               </a> 
      </li> 


      <li id="li_thumb5"> 
       <a id="thumb5" class="thumb_slider_accueil"> 
                <div class="indicator"></div> 
        <div class="thumbnail" style="background:url(http://www.x.com/wp-content/uploads/2011/09/slide_reseau_sociaux-150x150.jpg) center center"> 
         <p>Branché sur les réseaux sociaux</p> 
        </div> 
        <div class="clear"></div> 
               </a> 
      </li> 
           </ul> 

    </div><!--#thumbnails_slider_accueil--> 
    <div class="clear"></div> 
</div><!--#sliderAccueil-->

它的一部分是在法國，但代碼是在語言的相同的事情

來源

2011-12-28 Fredy31

您可以在'nextSlideElement'中顯示數據示例嗎？ – jergason 2011-12-28 14:31:30

前：空，//過渡回調（範圍設置爲元素，以顯示）功能（currSlideElement，nextSlideElement，期權，forwardFlag） – MahdeTo 2011-12-28 14:33:07

@Jergason我添加了一個屏幕截圖中的問題 – Fredy31 2011-12-28 15:54:25

您應該可以使用此表單來獲取下一張幻燈片的指示元素。 jquery選擇器允許您將其範圍縮小$(selector,[scope])

function onBefore(currSlideElement, nextSlideElement, options, forwardFlag){ 
    $('.indicator', nextSlideElement).removeClass('current'); 
}

來源

2012-05-07 19:10:15 lucuma

JQuery Cycle - 在回調參數之前

回答

相關問題