嵌入 JSSOR 滑块

Question

我正在尝试将滑块嵌入到我的网站中，但是当我对其进行测试时，白色方块堆叠了 3 层高（3 种不同的幻灯片）。我是 javascript 的新手，显然错过了一些东西。我希望有一个包含 3 张幻灯片的滑块，单击它可以将用户带到另一个页面。我哪里错了？

Javascript:

 <script src="jssor.slider.min.js"></script>
    <script>
    jssor_slider1_starter = function (containerId) {
        var options = {
            $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$,
                $ChanceToShow: 2
            }
        };
        var jssor_slider1 = new $JssorSlider$(containerId, options);
    };
</script>

HTML:

<!-- Jssor Slider Begin -->
<!-- You can move inline styles to css file or css block. -->
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px;
    height: 300px; ">

    <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
        overflow: hidden;">
        <div><a u="image" href="sermon.html"><img src="pic05.jpg" /></a></div>
        <div><a u="image" href="sunday.html"><img src="pic06.jpg" /></a></div>
        <div><a u="image" href="mdeia.html"><img src="media.jpg" /></a></div>

    </div>

    <!-- Arrow Navigator Skin Begin -->
    <style>
        /* jssor slider arrow navigator skin 03 css */
        /*
        .jssora03l              (normal)
        .jssora03r              (normal)
        .jssora03l:hover        (normal mouseover)
        .jssora03r:hover        (normal mouseover)
        .jssora03ldn            (mousedown)
        .jssora03rdn            (mousedown)
        */
        .jssora03l, .jssora03r, .jssora03ldn, .jssora03rdn
        {
            position: absolute;
            cursor: pointer;
            display: block;
            background: url(../img/a03.png) no-repeat;
            overflow:hidden;
        }
        .jssora03l { background-position: -3px -33px; }
        .jssora03r { background-position: -63px -33px; }
        .jssora03l:hover { background-position: -123px -33px; }
        .jssora03r:hover { background-position: -183px -33px; }
        .jssora03ldn { background-position: -243px -33px; }
        .jssora03rdn { background-position: -303px -33px; }
    </style>
    <!-- Arrow Left -->
    <span u="arrowleft" class="jssora03l" style="width: 55px; height: 55px; top: 123px; left: 8px;">
    </span>
    <!-- Arrow Right -->
    <span u="arrowright" class="jssora03r" style="width: 55px; height: 55px; top: 123px; right: 8px">
    </span>
    <!-- Arrow Navigator Skin End -->
    <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
    <!-- Trigger -->
    <script>
        jssor_slider1_starter('slider1_container');
    </script>
</div>
<!-- Jssor Slider End -->

Answer 1

我查看了您的页面，发现您将 'jssor.slider.mini.js' 放在了根文件夹中。

所以，正确的参考路径是，

<script src="/jssor.slider.mini.js"></script>

或

<script src="jssor.slider.mini.js"></script>

顺便说一句，'jssor.slider.min.js'和'jssor.slider.mini.js'是一样的，你只需要一个。

请删除以下行，

<script src="js/jssor.slider.min.js"></script>

编辑：

而你没有初始化代码，请添加以下代码，

<script>
    jssor_slider1_starter = function (containerId) {
        var options = {
            $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
            $ArrowNavigatorOptions: {                       //[Optional] Options to specify and enable arrow navigator or not
                $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
                $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                $AutoCenter: 0,                                 //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                $Steps: 1                                       //[Optional] Steps to go for each navigation request, default value is 1
            }
        };

        var jssor_slider1 = new $JssorSlider$(containerId, options);
    };
</script>

另外，请将 a03.png 移动到您的 [root]/img 文件夹。

嵌入 JSSOR 滑块

Embedding JSSOR slider

javascript

css

jquery

slider

jssor