Jassor滑块从滑块0开始播放

Jassor slider play from slide0

本文关键字:播放 开始 Jassor      更新时间:2023-09-26

我有一个单页滚动网站。我使用的Jassor滑块有3-4张幻灯片可以自动播放,我想以某种方式制作href="#home"href="#",它可以到达页面顶部,滑块位于某个随机自动播放幻灯片上。是

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

目前我的滑块代码看起来像这个

     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);
}

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

我的想法是创建一个调用$PlayTo(0) 的api

您可以在blackgoldconferences.com

上查看完整的代码

您正在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);
}