将JSSOR幻灯片嵌入网页

Question

将JSSOR幻灯片嵌入网页

3

我正在尝试将滑块嵌入我的网站，但测试时出现了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 -->

- user3459000

'jssor.slider.min.js'文件是否与您的页面位于同一个文件夹中？ - jssor

我刚刚测试了一下，它可以正常工作。请确保 'jssor.slider.min.js' 的引用路径是正确的。 - jssor

我把它放在了我的javascript文件夹中，与页面上的其他脚本一起。我将其移动到根文件夹中，即包含HTML文件的文件夹，但仍无法显示幻灯片。我仍然在屏幕左侧看到红色的X堆叠。 - user3459000

最初页面在一个单独的文件夹中，而jssor.slider.mini.js不在我的网站上。我移动了jssor.slider.min.js，现在我可以看到第一张图片，但它是左对齐的，并且没有导航箭头。我需要jssor.slider.mini.js和jssor.slider.min.js吗？ - user3459000

有任何网址可以看一下吗？ - jssor

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jssor · Accepted Answer

我看了你的页面，发现你把“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文件夹中。