Jquery Cycle：无法浏览幻灯片

Question

我正在尝试使用 jQuery Cycle 制作一个滑块，当您单击 5 个缩略图之一时，您会切换到滑块中的右侧幻灯片。这些拇指位于滑块的外部。

问题是，由于某种原因，startingSlide 参数不起作用，仅执行 .cycle(number) 也不起作用，即使滑块显然正在运行。这是代码的一瞥：

JS

        jQuery(document).ready(function(){
        var current_slide;
        jQuery('#slider_accueil').cycle({ 
            fx:     'fade',
            timeout: 3000,
            after: onAfter,
            startingSlide: 0,
            pager: '#nav',
            next: '.next_btn_slider',
            prev: '.prev_btn_slider'
        });

        function onAfter(curr,next,opts){
            jQuery('.indicator').removeClass('current')
            current_slide=opts.currSlide + 1
            jQuery('#thumb'+current_slide+' .indicator').addClass('current')
        }

        jQuery('#thumb1').click(function(){
            jQuery('#slider_accueil').cycle(0);
            return false;
        })

        jQuery('#thumb2').click(function(){
            jQuery('#slider_accueil').cycle(1); 
            return false;
        })

        jQuery('#thumb3').click(function(){
            jQuery('#slider_accueil').cycle(2); 
            return false;
        })

        jQuery('#thumb4').click(function(){
            jQuery('#slider_accueil').cycle(3); 
            return false;
        })

        jQuery('#thumb5').click(function(){
            jQuery('#slider_accueil').cycle(4); 
            return false;
        })
    })

html

<div id="sliderAccueil">
            <div id="nav" style="display:none;"></div>
            <img src="/wp-content/themes/customtheme/images/slider_previous.png" class="prev_btn_slider">
            <img src="/wp-content/themes/customtheme/images/slider_next.png" class="next_btn_slider">
            <div id="slider_accueil" style="position: relative;">
                                    <div style="position: absolute; top: 0px; left: 0px; z-index: 5; opacity: 0; display: none;">
                    <img src="/wp-content/uploads/2011/09/slider1.jpg">
                    <div>
                        <div class="maintext">
                            <h2>Slide 1</h2>
                            <p>Slide 1</p>
                        </div>
                        <div class="link">
                            <b href="/"></a>
                            <b class="call_slide" href="/"><ig src="/wp-content/themes/customtheme/images/call_slider.png"></a>
                        </div>
                    </div>
                </div>
                                    <div style="position: absolute; top: 0px; left: 0px; z-index: 4; display: none; opacity: 0;">
                    <ig src="/wp-content/uploads/2011/09/slider2.jpg">
                    <div>
                        <div class="maintext">
                            <h2>Slide 2</h2>
                            <p>Slide 2</p>
                        </div>
                        <div class="link">
                            <b href="/"></a>
                            <b class="call_slide" href="/"><img src="/wp-content/themes/customtheme/images/call_slider.png"></a>
                        </div>
                    </div>
                </div>
                                    <div style="position: absolute; top: 0px; left: 0px; z-index: 3; display: block; opacity: 0.942616;">
                    <img src="/wp-content/uploads/2011/09/slider3.jpg">
                    <div>
                        <div class="maintext">
                            <h2>Reprise des travaux majeurs</h2>
                            <p>Slide 3</p>
                        </div>
                        <div class="link">
                            <b href="/"></a>
                            <b class="call_slide" href="/"><img src="/wp-content/themes/customtheme/images/call_slider.png"></a>
                        </div>
                    </div>
                </div>
                                    <div style="position: absolute; top: 0px; left: 0px; z-index: 2; display: block; opacity: 0.0573843;">
                    <img src="/wp-content/uploads/2011/09/slider4.jpg">
                    <div>
                        <div class="maintext">
                            <h2>Slide 4</h2>
                            <p>Slide 4</p>
                        </div>
                        <div class="link">
                            <b href="/"></a>
                            <b class="call_slide" href="/"><img src="/wp-content/themes/customtheme/images/call_slider.png"></a>
                        </div>
                    </div>
                </div>
                                    <div style="position: absolute; top: 0px; left: 0px; z-index: 1; display: none; opacity: 0;">
                    <img src="/wp-content/uploads/2011/09/slider5.jpg">
                    <div>
                        <div class="maintext">
                            <h2>Slide 5</h2>
                            <p>Slide 5</p>
                        </div>
                        <div class="link">
                            <b href="/"></a>
                            <b class="call_slide" href="/"><img src="/wp-content/themes/customtheme/images/call_slider.png"></a>
                        </div>
                    </div>
                </div>
                                </div>
            <div id="thumbnails_slider_accueil">
                <ul>
                                                                    <li>
                        <b id="thumb1" href="#1">
                            <div class="indicator"></div>
                            <div style="background-image:url(/wp-content/uploads/2011/09/thumb1.png)" class="thumbnail">
                                <p>Voies retranchées trains ajoutés</p>
                            </div>
                            <div class="clear"></div>
                                                        </a>
                    </li>
                                            <li>
                        <b id="thumb2" href="#2">
                            <div class="indicator"></div>
                            <div style="background-image:url(/wp-content/uploads/2011/09/thumb2.jpg)" class="thumbnail">
                                <p>Événements</p>
                            </div>
                            <div class="clear"></div>
                                                        </a>
                    </li>
                                            <li>
                        <b id="thumb3" href="#3">
                            <div class="indicator current"></div>
                            <div style="background-image:url(/wp-content/uploads/2011/09/thumb3.jpg)" class="thumbnail">
                                <p></p>
                            </div>
                            <div class="clear"></div>
                                                        </a>
                    </li>
                                            <li>
                        <b id="thumb4" href="#4">
                            <div class="indicator"></div>
                            <div style="background-image:url(/wp-content/uploads/2011/09/thumb4.jpg)" class="thumbnail">
                                <p>Appels d'offres</p>
                            </div>
                            <div class="clear"></div>
                                                        </a>
                    </li>
                                            <li>
                        <b id="thumb5" href="#5">
                            <div class="indicator"></div>
                            <div style="background-image:url(/wp-content/uploads/2011/09/thumb5.jpg)" class="thumbnail">
                                <p>Environnement</p>
                            </div>
                            <div class="clear"></div>
                                                        </a>
                    </li>
                                        </ul>
            </div>
            <div class="clear"></div>
        </div>

^check source，似乎我不能把它比这更干净。

有人有主意吗？

PS，所有 img 都是 ig，所有链接都是……Stackoverflow 不让我发帖是故意的。

Answer 1

我找到了我自己问题的答案...

似乎要使用 jQuery('#slider_accueil').cycle(0);您需要链接完整版本，而不是精简版。

看来这个功能是从 full 到 lite 的转换中被删除的功能之一......自我注意：lite 版本可能没有你想做的功能......只是花了 2 个小时尝试了各种在那方面的东西。 ：p