Question

使用JSSOR我有一个嵌套的滑块设置和工作。我已经查看了这些选项，但没有看到任何可以让它循环遍历每张幻灯片（标签）上的所有图像的地方。它目前循环选定幻灯片（选项卡）上的所有图像，然后您手动选择下一张幻灯片（选项卡），然后循环浏览这些图像。如果我将AutoPlay选项设置为true，它会循环播放幻灯片（选项卡），但不会循环播放该幻灯片中的图像。我喜欢它自动遍历所有标签和所有图像。我有一个选项吗？

Answer 1

嵌套滑块的工作方式。没有选项可以自动循环显示所有图像。

如果您想让它循环显示所有图像，那么您需要手动api调用。

您可以通过3个步骤来实现目标。

检测第一个子滑块的当前幻灯片索引。
如果到达最后一张幻灯片，则将主滑块切换到第二个子滑块。
播放第二个子滑块。

打开＆＃39; nested-slider.source.html＆＃39;并进行以下更改，

            var childSlider = new $JssorSlider$(containerId, nestedSliderOptions);
            childSlider.$On($JssorSlider$.$EVT_STATE_CHANGE, OnChildSliderStateChange);
            nestedSliders.push(childSlider);

        function OnChildSliderStateChange(slideIndex, progress, progressBegin, idleBegin, idleEnd, progressEnd) {
            var childSlider = nestedSliders[jssor_slider1.$CurrentIndex()];
            if (progress == progressEnd && slideIndex == childSlider.$SlidesCount() - 1) {
                //last slide (of current chlid sldier) plays over, pause the child slider, and move the main slider next
                childSlider.$Pause();
                childSlider.$GoTo(0);
                jssor_slider1.$Next();
            }
        }

然后你会得到http://www.jssor.com/testcase/nested-slider-loop-through.source.html

Answer 2

可能有更好的方法，但这就是我想出来的

_SelfSlideItem.$GoForNextSlide = function () {
            if (_SlideshowRunner) {
                var slideshowTransition = _SlideshowRunner.$GetTransition(_SlideCount);

                if (slideshowTransition) {
                    var loadingTicket = _LoadingTicket = $JssorUtils$.$GetNow();

                    var nextIndex = slideIndex + _PlayReverse;
                    var nextItem = _SlideItems[GetRealIndex(nextIndex)];
                    return nextItem.$LoadImage($JssorUtils$.$CreateCallback(null, LoadSlideshowImageCompleteEventHandler, nextIndex, nextItem, slideshowTransition, loadingTicket), _LoadingScreen);
                }
            }
            if ((_SlideCount - (slideIndex + _PlayReverse)) == 0){
                **//get reference to the tab selectors
                var nodes = document.querySelectorAll("[u=thumbnavigator] .jssort12 [debug-id=slide-board] [debug-id]");
                //loop through them and find the one that's selected (.pav) and if it's not the one at the end of the list, select the next one, otherwise start at the beginning again
                for (i=0; i<nodes.length; i++){
                    if (nodes[i].querySelectorAll(".pav").length)
                        if ((i+1) == nodes.length)
                            document.querySelectorAll("[class^=p]")[0].click();
                        else
                            document.querySelectorAll("[class^=p]")[i+1].click();
                }**
            }
            PlayTo(_CurrentSlideIndex + _Options.$AutoPlaySteps * _PlayReverse);
        };

JSSOR - 在嵌套滑块中循环浏览所有幻灯片和图像

2 个答案: