Question

   <ul id="board_slider">
                                <li>

                                    <img src="images/temp/img1.gif"/>
                                    <img src="images/temp/img1.gif"/>
                                    <img src="images/temp/img1.gif"/> 
                                    <img src="images/temp/img1.gif"/>
                                    <img src="images/temp/img1.gif"/>
                                    <img src="images/temp/img1.gif"/>
                                    <img src="images/temp/img1.gif"/>

                                </li>
                                <li>
                                    <img src="images/temp/img1.gif"/>
                                    <img src="images/temp/img1.gif"/>
                                    <img src="images/temp/img1.gif"/>
                                    <img src="images/temp/img1.gif"/>
                                    <img src="images/temp/img1.gif"/>
                                    <img src="images/temp/img1.gif"/>
                                    <img src="images/temp/img1.gif"/>

                                </li>
                            </ul>

JS：

   $("#board_slider").anythingSlider(
            {playRtl: true, enableKeyboard: false, buildNavigation: false, resizeContents: true, hashTags: false, buildStartStop: false, onSlideInit:drawRandom}
        );

将呈现如下：

    <li class="panel activePage" style="width: 656px; height: 188px;">
                                            <img src="images/temp/img1.gif" class="notext brick">
                                            <img src="images/temp/img1.gif" class="notext brick">
                                            <img src="images/temp/img1.gif" class="notext brick">
                                            <img src="images/temp/img1.gif" class="notext brick">
                                            <img src="images/temp/img1.gif" class="notext brick">
                                            <img src="images/temp/img1.gif" class="notext brick">
                                            <img src="images/temp/img1.gif" class="notext brick">

                                            </li>

<li class="panel" style="width: 656px; height: 188px; position: relative;" data-min-width="1440" data-total-col="12" data-total-row="5" data-wall-width="625" data-wall-height="158">

                                            <img src="images/temp/img1.gif" width="655" height="125.33333333333333" class="notext brick" data-delay="1" data-height="61.777777671813965" data-width="436.77777767181396" data-state="move" style="position: absolute; opacity: 1; width: 411.67px; height: 54.2px; top: 0px; left: 0px;" id="1-3">
                                            <img src="images/temp/img1.gif" width="436.6666666666667" height="125.33333333333333" class="notext brick" data-delay="2" data-height="187.77777767181396" data-width="217.77777767181396" data-state="move" style="position: absolute; opacity: 1; width: 198.33px; height: 88.8px; top: 69.2px; left: 0px;" id="2-3">
                                            <img src="images/temp/img1.gif" width="218.33333333333334" height="62.666666666666664" class="notext brick" data-delay="3" data-height="124.77777767181396" data-width="654.777777671814" data-state="move" style="position: absolute; opacity: 1; width: 411.67px; height: 88.8px; top: 69.2px; left: 213.33px;" id="3-3"> 
                                            <img src="images/temp/img1.gif" width="655" height="62.666666666666664" class="notext brick" data-delay="4" data-height="124.77777767181396" data-width="436.77777767181396" data-state="move" style="position: absolute; opacity: 1; width: 38.33px; height: 54.2px; top: 0px; left: 426.67px;" id="4-3">
                                            <img src="images/temp/img1.gif" width="218.33333333333334" height="188" class="notext brick" data-delay="5" data-height="187.77777767181396" data-width="436.77777767181396" data-state="move" style="position: absolute; opacity: 1; width: 38.33px; height: 54.2px; top: 0px; left: 480px;" id="5-3">
                                            <img src="images/temp/img1.gif" width="218.33333333333334" height="188" class="notext brick" data-delay="6" data-height="124.77777767181396" data-width="654.777777671814" data-state="move" style="position: absolute; opacity: 1; width: 38.33px; height: 54.2px; top: 0px; left: 533.33px;" id="6-3">
                                            <img src="images/temp/img1.gif" width="436.6666666666667" height="188" class="notext brick" data-delay="7" data-height="61.777777671813965" data-width="654.777777671814" data-state="move" style="position: absolute; opacity: 1; width: 38.33px; height: 54.2px; top: 0px; left: 586.67px;" id="7-3">

                                    </li>

当我现在处于活动状态时，如何选择下一个滑块

Answer 1

您可以使用

$('.activePage').next('.panel');

.next（）函数通过可选的选择器为您提供下一个兄弟。

Answer 2

如果您问如何推进幻灯片，请尝试使用此代码（from the documentation）：

$('#board_slider').data('AnythingSlider').goForward();

如何从anythingslider JQuery中选择下一个幻灯片容器

2 个答案: