关于JSSOR Slider的一些问题

时间:2014-04-26 10:49:26

标签: jquery slider slideshow jssor

我下载了JSSOR Slider FULLPACK并决定使用此图库:http://www.jssor.com/demos/image-gallery.html

我将此插入到我的页面中,与源中显示的相同。但没有缩略图或导航箭头显示。

然后我将显示的当前图像的尺寸更改为306x306,因为这是我将使用的图像的大小,并将缩略图大小更改为64x64,因为这是我的缩略图的大小。

幻灯片的主要图像有效,但缩略图是主幻灯片的一部分,而不是主图像的下方。还没有导航箭头显示。

以下是2张图片向您展示: http://www.imagebam.com/image/baa18d322946581 http://www.imagebam.com/image/48d327322946583

我知道箭头没有显示,因为它们是默认值:

<span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 158px;   left: 8px;">

<span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 158px; right: 8px">

我不确定我在这里需要什么价值。

以下是我的html文件中幻灯片显示的完整代码:

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 306px; height: 372px; background: #191919; overflow: hidden;">
    <!-- Loading Screen -->
    <div u="loading" style="position: absolute; top: 0px; left: 0px;">
        <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
            background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
        </div>
        <div style="position: absolute; display: block; background: url(../imag/loading.gif) no-repeat center center;
            top: 0px; left: 0px;width: 100%;height:100%;">
        </div>
    </div>

    <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 306px; height: 306px; overflow: hidden;">
        <div>
            <img u="image" src="../images/dundee1.jpg" />
            <img u="thumb" src="../images/thumbs/dundee1_thumb.jpg" />
        </div>
        <div>
            <img u="image" src="../images/dundee3.jpg" />
            <img u="thumb" src="../images/thumbs/dundee3_thumb.jpg" />
        </div>
        <div>
            <img u="image" src="../images/dundee12.jpg" />
            <img u="thumb" src="../images/thumbs/dundee12_thumb.jpg" />
        </div>
        <div>
            <img u="image" src="../images/dundee16.jpg" />
            <img u="thumb" src="../images/thumbs/dundee16_thumb.jpg" />
        </div>
        <div>
            <img u="image" src="../images/dundee17.jpg" />
            <img u="thumb" src="../images/thumbs/dundee17_thumb.jpg" />
        </div>
        <div>
            <img u="image" src="../images/dundee18.jpg" />
            <img u="thumb" src="../images/thumbs/dundee18_thumb.jpg" />
        </div>
        <div>
            <img u="image" src="../images/dundee19.jpg" />
            <img u="thumb" src="../images/thumbs/dundee19_thumb.jpg" />
        </div>
        <div>
            <img u="image" src="../images/dundee25.jpg" />
            <img u="thumb" src="../images/thumbs/dundee25_thumb.jpg" />
        </div>
        <div>
            <img u="image" src="../images/dundee26.jpg" />
            <img u="thumb" src="../images/thumbs/dundee26_thumb.jpg" />
        </div>
        <div>
            <img u="image" src="../images/dundee27.jpg" />
            <img u="thumb" src="../images/thumbs/dundee27_thumb.jpg" />
        </div>


    <!-- Arrow Navigator Skin Begin -->
    <style>
        /* jssor slider arrow navigator skin 05 css */
        /*
        .jssora05l              (normal)
        .jssora05r              (normal)
        .jssora05l:hover        (normal mouseover)
        .jssora05r:hover        (normal mouseover)
        .jssora05ldn            (mousedown)
        .jssora05rdn            (mousedown)
        */
        .jssora05l, .jssora05r, .jssora05ldn, .jssora05rdn
        {
            position: absolute;
            cursor: pointer;
            display: block;
            background: url(../images/a17.png) no-repeat;
            overflow:hidden;
        }
        .jssora05l { background-position: -10px -40px; }
        .jssora05r { background-position: -70px -40px; }
        .jssora05l:hover { background-position: -130px -40px; }
        .jssora05r:hover { background-position: -190px -40px; }
        .jssora05ldn { background-position: -250px -40px; }
        .jssora05rdn { background-position: -310px -40px; }
    </style>
    <!-- Arrow Left -->
    <span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 158px; left: 8px;">
    </span>
    <!-- Arrow Right -->
    <span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 158px; right: 8px">
    </span>
    <!-- Arrow Navigator Skin End -->

    <!-- Thumbnail Navigator Skin Begin -->
    <div u="thumbnavigator" class="jssort01" style="position: absolute; width: 306px; height: 64px; left:0px; bottom: 0px;">
        <!-- Thumbnail Item Skin Begin -->
        <style>
            /* jssor slider thumbnail navigator skin 01 css */
            /*
            .jssort01 .p           (normal)
            .jssort01 .p:hover     (normal mouseover)
            .jssort01 .pav           (active)
            .jssort01 .pav:hover     (active mouseover)
            .jssort01 .pdn           (mousedown)
            */
            .jssort01 .w {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 100%;
            }

            .jssort01 .c {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 64px;
                height: 64px;
                border: #000 2px solid;
            }

            .jssort01 .p:hover .c, .jssort01 .pav:hover .c, .jssort01 .pav .c {
                background: url(../images/t01.png) center center;
                border-width: 0px;
                top: 2px;
                left: 2px;
                width: 64px;
                height: 64px;
            }

            .jssort01 .p:hover .c, .jssort01 .pav:hover .c {
                top: 0px;
                left: 0px;
                width: 66px;
                height: 66px;
                border: #fff 1px solid;
            }
        </style>
        <div u="slides" style="cursor: move;">
            <div u="prototype" class="p" style="position: absolute; width: 72px; height: 72px; top: 0; left: 0;">
                <div class=w><thumbnailtemplate style=" width: 100%; height: 100%; border: none;position:absolute; top: 0; left: 0;"></thumbnailtemplate></div>
                <div class=c>
                </div>
            </div>
        </div>
        <!-- Thumbnail Item Skin End -->
    </div>
    <!-- Thumbnail Navigator Skin End -->
    <a style="display: none" href="http://www.jssor.com">CE0832a jQuery Slider</a>
</div>
<!-- Jssor Slider End -->
<img width=0 height=0 />

<!--<div id="debuginfo" style="width:300px;height:300px;background-color:Red;color:White;Padding:5px;"></div>-->    

这是脚本代码:

jQuery(document).ready(function ($) {

    var _SlideshowTransitions = [
    //Fade in L
        {$Duration: 1200, $During: { $Left: [0.3, 0.7] }, $FlyDirection: 1, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
    //Fade out R
        , { $Duration: 1200, $SlideOut: true, $FlyDirection: 2, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
    //Fade in R
        , { $Duration: 1200, $During: { $Left: [0.3, 0.7] }, $FlyDirection: 2, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
    //Fade out L
        , { $Duration: 1200, $SlideOut: true, $FlyDirection: 1, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }

    //Fade in T
        , { $Duration: 1200, $During: { $Top: [0.3, 0.7] }, $FlyDirection: 4, $Easing: { $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleVertical: 0.3, $Opacity: 2 }
    //Fade out B
        , { $Duration: 1200, $SlideOut: true, $FlyDirection: 8, $Easing: { $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleVertical: 0.3, $Opacity: 2 }
    //Fade in B
        , { $Duration: 1200, $During: { $Top: [0.3, 0.7] }, $FlyDirection: 8, $Easing: { $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleVertical: 0.3, $Opacity: 2 }
    //Fade out T
        , { $Duration: 1200, $SlideOut: true, $FlyDirection: 4, $Easing: { $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleVertical: 0.3, $Opacity: 2 }

    //Fade in LR
        , { $Duration: 1200, $Cols: 2, $During: { $Left: [0.3, 0.7] }, $FlyDirection: 1, $ChessMode: { $Column: 3 }, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
    //Fade out LR
        , { $Duration: 1200, $Cols: 2, $SlideOut: true, $FlyDirection: 1, $ChessMode: { $Column: 3 }, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
    //Fade in TB
        , { $Duration: 1200, $Rows: 2, $During: { $Top: [0.3, 0.7] }, $FlyDirection: 4, $ChessMode: { $Row: 12 }, $Easing: { $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleVertical: 0.3, $Opacity: 2 }
    //Fade out TB
        , { $Duration: 1200, $Rows: 2, $SlideOut: true, $FlyDirection: 4, $ChessMode: { $Row: 12 }, $Easing: { $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleVertical: 0.3, $Opacity: 2 }

    //Fade in LR Chess
        , { $Duration: 1200, $Cols: 2, $During: { $Top: [0.3, 0.7] }, $FlyDirection: 4, $ChessMode: { $Column: 12 }, $Easing: { $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleVertical: 0.3, $Opacity: 2 }
    //Fade out LR Chess
        , { $Duration: 1200, $Cols: 2, $SlideOut: true, $FlyDirection: 8, $ChessMode: { $Column: 12 }, $Easing: { $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleVertical: 0.3, $Opacity: 2 }
    //Fade in TB Chess
        , { $Duration: 1200, $Rows: 2, $During: { $Left: [0.3, 0.7] }, $FlyDirection: 1, $ChessMode: { $Row: 3 }, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
    //Fade out TB Chess
        , { $Duration: 1200, $Rows: 2, $SlideOut: true, $FlyDirection: 2, $ChessMode: { $Row: 3 }, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }

    //Fade in Corners
        , { $Duration: 1200, $Cols: 2, $Rows: 2, $During: { $Left: [0.3, 0.7], $Top: [0.3, 0.7] }, $FlyDirection: 5, $ChessMode: { $Column: 3, $Row: 12 }, $Easing: { $Left: $Jease$.$InCubic, $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $ScaleVertical: 0.3, $Opacity: 2 }
    //Fade out Corners
        , { $Duration: 1200, $Cols: 2, $Rows: 2, $During: { $Left: [0.3, 0.7], $Top: [0.3, 0.7] }, $SlideOut: true, $FlyDirection: 5, $ChessMode: { $Column: 3, $Row: 12 }, $Easing: { $Left: $Jease$.$InCubic, $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $ScaleVertical: 0.3, $Opacity: 2 }

    //Fade Clip in H
        , { $Duration: 1200, $Delay: 20, $Clip: 3, $Assembly: 260, $Easing: { $Clip: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $Opacity: 2 }
    //Fade Clip out H
        , { $Duration: 1200, $Delay: 20, $Clip: 3, $SlideOut: true, $Assembly: 260, $Easing: { $Clip: $Jease$.$OutCubic, $Opacity: $Jease$.$Linear }, $Opacity: 2 }
    //Fade Clip in V
        , { $Duration: 1200, $Delay: 20, $Clip: 12, $Assembly: 260, $Easing: { $Clip: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $Opacity: 2 }
    //Fade Clip out V
        , { $Duration: 1200, $Delay: 20, $Clip: 12, $SlideOut: true, $Assembly: 260, $Easing: { $Clip: $Jease$.$OutCubic, $Opacity: $Jease$.$Linear }, $Opacity: 2 }
        ];

    var options = {
        $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
        $AutoPlayInterval: 1500,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
        $PauseOnHover: 3,                                //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, default value is 3

        $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)
        $ArrowKeyNavigation: true,                          //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
        $SlideDuration: 800,                                //Specifies default duration (swipe) for slide in milliseconds

        $SlideshowOptions: {                                //[Optional] Options to specify and enable slideshow or not
            $Class: $JssorSlideshowRunner$,                 //[Required] Class to create instance of slideshow
            $Transitions: _SlideshowTransitions,            //[Required] An array of slideshow transitions to play slideshow
            $TransitionsOrder: 1,                           //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
            $ShowLink: true                                    //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
        },

        $ArrowNavigatorOptions: {                       //[Optional] Options to specify and enable arrow navigator or not
            $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
            $ChanceToShow: 1                               //[Required] 0 Never, 1 Mouse Over, 2 Always
        },

        $ThumbnailNavigatorOptions: {                       //[Optional] Options to specify and enable thumbnail navigator or not
            $Class: $JssorThumbnailNavigator$,              //[Required] Class to create thumbnail navigator instance
            $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always

            $ActionMode: 1,                                 //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
            $SpacingX: 8,                                   //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
            $Cols: 10,                             //[Optional] Number of pieces to display, default value is 1
            $Align: 360                          //[Optional] The offset position to park thumbnail
        }
    };

    var jssor_slider1 = new $JssorSlider$("slider1_container", options);
    //responsive code begin
    //you can remove responsive code if you don't want the slider scales while window resizes
    function ScaleSlider() {
        var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
        if (parentWidth)
            jssor_slider1.$ScaleWidth(Math.max(Math.min(parentWidth, 306), 306));
        else
            window.setTimeout(ScaleSlider, 30);
    }

    ScaleSlider();

    $(window).bind("load", ScaleSlider);
    $(window).bind("resize", ScaleSlider);
    $(window).bind("orientationchange", ScaleSlider);
    //responsive code end
});     

现在有这些问题:

  1. 缩略图周围的黑框已关闭..... http://www.imagebam.com/image/cd9d52323141060

  2. 幻灯片显示在页面的左侧......我需要它居中,但我尝试的方法都没有。

  3. 我在幻灯片中有很多图像,但是看不到上图中显示的任何其他缩略图...我可以向左或向右拖动缩略图。它只是回到图像中的缩略图。

3 个答案:

答案 0 :(得分:1)

结束标记&lt; / div&gt; of&lt; div u =&#34; slide&#34; ...&gt;不见了。

请替换

                                    </div>


                                <!-- Arrow Navigator Skin Begin -->
                                <style>

                                    </div>
                                </div>
                                <!-- Arrow Navigator Skin Begin -->
                                <style>

答案 1 :(得分:1)

重新1:缩略图偏移 你要调整缩略图皮肤的CSS。

re 2:中心滑块 使用'margin:0 auto;'中心元素

<div id="slider1_container" style="...;margin: 0 auto;...">

重新3:展示件 请将$ Cols设为4

$ThumbnailNavigatorOptions: {                       //[Optional] Options to specify and enable thumbnail navigator or not
    $Class: $JssorThumbnailNavigator$,              //[Required] Class to create thumbnail navigator instance
    $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always

    $ActionMode: 1,                                 //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
    $SpacingX: 8,                                   //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
    $Cols: 4,                             //[Optional] Number of pieces to display, default value is 1
    $Align: 0                          //[Optional] The offset position to park thumbnail
}

答案 2 :(得分:1)

您在首发右箭头的末尾缺少分号

    <span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 158px; right: 8px">

应该是

    <span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 158px; right: 8px;">

您也在线上传了箭头图片到您的img文件夹。这些2列在您的网页t01.png和a17.png上的源代码中。将它们上传到您的服务器。