Question

我似乎无法弄清楚如何使用Jquery Cycle的Before回调参数。

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函数来定位下一个被滑动的元素？

编辑：下面是通过console.dir(nextSlideElement)

放入控制台的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-->

它的一部分是法语，但代码与语言相同

Answer 1

您应该能够使用此表单获取下一张幻灯片的指示元素。 jquery选择器允许您按$(selector,[scope])

进行范围调整

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

JQuery Cycle - 回调参数之前

1 个答案: