JQuery Cycle - 回调参数之前答案

【问题标题】：JQuery Cycle - Before callback parametersJQuery Cycle - 回调参数之前
【发布时间】：2012-05-08 03:10:15
【问题描述】：

我似乎无法弄清楚如何使用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 的图像

编辑 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-->

其中一部分是法语，但代码与语言相同

【问题讨论】：

你能举一个nextSlideElement中数据的例子吗？
before: null, // 过渡回调（范围设置为要显示的元素）：function(currSlideElement, nextSlideElement, options, forwardFlag)
@Jergason 我在问题中添加了截图
您可以发布您要修改的下一个幻灯片元素的 html 吗？在这个例子中，我可以使用 nextSlideElement 添加一个类/删除一个类没有问题。 jsfiddle.net/mt93D
加了一大段代码，大家可以看看我要去哪了。

标签： javascript jquery jquery-cycle

【解决方案1】：

您应该能够使用此表单来获取下一张幻灯片的指示元素。 jquery 选择器允许您通过$(selector,[scope]) 对其进行范围设置

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

【讨论】：