javascript - Jssor slider 从slide0播放

Question

我有一个一页滚动网站。我正在使用 Jassor slider 自动播放 3-4 张幻灯片，我想以某种方式制作 href="#home"或href="#"它位于页面顶部，其中 slider 位于一些随机自动播放的幻灯片上。是

当页面滚动到#home 时，有什么方法可以重置到第一张幻灯片吗？

目前我的 slider 代码如下所示

     jssor_1_slider_init = function() {

            var jssor_1_SlideoTransitions = [
              [{b:0.0,d:600.0,y:-290.0,e:{y:27.0}}],
              [{b:0.0,d:1000.0,y:185.0},{b:1000.0,d:500.0,o:-1.0},{b:1500.0,d:500.0,o:1.0},{b:2000.0,d:1500.0,r:360.0},{b:3500.0,d:1000.0,rX:30.0},{b:4500.0,d:500.0,rX:-30.0},{b:5000.0,d:1000.0,rY:30.0},{b:6000.0,d:500.0,rY:-30.0},{b:6500.0,d:500.0,sX:1.0},{b:7000.0,d:500.0,sX:-1.0},{b:7500.0,d:500.0,sY:1.0},{b:8000.0,d:500.0,sY:-1.0},{b:8500.0,d:500.0,kX:30.0},{b:9000.0,d:500.0,kX:-30.0},{b:9500.0,d:500.0,kY:30.0},{b:10000.0,d:500.0,kY:-30.0},{b:10500.0,d:500.0,c:{x:87.50,t:-87.50}},{b:11000.0,d:500.0,c:{x:-87.50,t:87.50}}]
            ];

            var jssor_1_options = {
              $AutoPlay: true,
              $Idle: 2000,
              $FillMode: 2,
              $CaptionSliderOptions: {
                $Class: $JssorCaptionSlideo$,
                $Transitions: jssor_1_SlideoTransitions
              },
              $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$
              },
              $BulletNavigatorOptions: {
                $Class: $JssorBulletNavigator$
              }
            };

            var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
            //responsive code begin
            //you can remove responsive code if you don't want the slider scales while window resizing
            function ScaleSlider() {
                var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
                if (refSize) {
                    refSize = Math.min(refSize, 600);
                    jssor_1_slider.$ScaleWidth(refSize);
                }
                else {
                    window.setTimeout(ScaleSlider, 30);
                }
            }
            ScaleSlider();
            $Jssor$.$AddEvent(window, "load", ScaleSlider);
            $Jssor$.$AddEvent(window, "resize",  $Jssor$.$WindowResizeFilter(window, ScaleSlider));
            $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);


            //responsive code end
        };
function SliderParkEventHandler {
                    jssor_slider1.$PlayTo(0);
}

尝试从链接调用函数 SlideParkEventHandler <a href="#home" onclick="return SliderParkEventHandler();">>Home</a>

我的想法是进行 api 调用 $PlayTo(0)

您可以在blackgoldconferences.com查看完整代码

Answer 1

您正在 jssor_1_slider_init 内初始化 jssor_1_slider，因此作用域将是本地的，并且无法从外部调用。

在全局范围内声明变量，以便您可以访问用于更改幻灯片的实例

var jssor_1_slider;

jssor_1_slider_init = function() {

    var jssor_1_SlideoTransitions = [
        [{b:0.0,d:600.0,y:-290.0,e:{y:27.0}}],
        [{b:0.0,d:1000.0,y:185.0},{b:1000.0,d:500.0,o:-1.0},{b:1500.0,d:500.0,o:1.0},{b:2000.0,d:1500.0,r:360.0},{b:3500.0,d:1000.0,rX:30.0},{b:4500.0,d:500.0,rX:-30.0},{b:5000.0,d:1000.0,rY:30.0},{b:6000.0,d:500.0,rY:-30.0},{b:6500.0,d:500.0,sX:1.0},{b:7000.0,d:500.0,sX:-1.0},{b:7500.0,d:500.0,sY:1.0},{b:8000.0,d:500.0,sY:-1.0},{b:8500.0,d:500.0,kX:30.0},{b:9000.0,d:500.0,kX:-30.0},{b:9500.0,d:500.0,kY:30.0},{b:10000.0,d:500.0,kY:-30.0},{b:10500.0,d:500.0,c:{x:87.50,t:-87.50}},{b:11000.0,d:500.0,c:{x:-87.50,t:87.50}}]
    ];

    var jssor_1_options = {
        $AutoPlay: true,
        $Idle: 2000,
        $FillMode: 2,
        $CaptionSliderOptions: {
            $Class: $JssorCaptionSlideo$,
            $Transitions: jssor_1_SlideoTransitions
        },
        $ArrowNavigatorOptions: {
            $Class: $JssorArrowNavigator$
        },
        $BulletNavigatorOptions: {
            $Class: $JssorBulletNavigator$
        }
    };

    jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
    //responsive code begin
    //you can remove responsive code if you don't want the slider scales while window resizing
    function ScaleSlider() {
        var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
        if (refSize) {
            refSize = Math.min(refSize, 600);
            jssor_1_slider.$ScaleWidth(refSize);
        }
        else {
            window.setTimeout(ScaleSlider, 30);
        }
    }
    ScaleSlider();
    $Jssor$.$AddEvent(window, "load", ScaleSlider);
    $Jssor$.$AddEvent(window, "resize",  $Jssor$.$WindowResizeFilter(window, ScaleSlider));
    $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);


    //responsive code end
};
function SliderParkEventHandler {
    jssor_slider1.$PlayTo(0);
}