JSSOR 比例尺：保持项目符号和箭头的大小

Question

我在 jquery 中使用 jssor 图像滑块。它运行良好，但在调整滑块大小时遇到问题。

我想在 window 宽度改变时调整滑块的大小。为此，jssor-API 提供函数 $ScaleWidth(newWidth)。但我对结果并不满意。 $ScaleWidth 完成后，它还会调整箭头和项目符号的大小。这样不好。

如果滑块变小，箭头和项目符号的可点击区域会变得太小而无法点击或看不到。

如果滑块变大，图像会变得太大，您会看到原始 arrow/bullet 图像的每个像素。

这是我目前的代码：

HTML

<!doctype html>
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
<head>
   <title></title>
   <style>
        html, body{margin: 0px}
   </style>
</head>
<body>
    <div id="Slider" style="position: relative; top: 0px; left: 0px;">
    <!-- Slides Container -->
    <div id="Slides" u="slides" style="position: absolute; overflow: hidden; left: 0px; top: 0px;">
        [List of DIVs with IMG tags]
    </div>
    <!--#region Arrow Navigator Skin Begin -->
    <!-- Help: http://www.jssor.com/development/slider-with-arrow-navigator-jquery.html -->
    <style>
        /* jssor slider arrow navigator skin 12 css */
        /*
        .jssora12l                  (normal)
        .jssora12r                  (normal)
        .jssora12l:hover            (normal mouseover)
        .jssora12r:hover            (normal mouseover)
        .jssora12l.jssora12ldn      (mousedown)
        .jssora12r.jssora12rdn      (mousedown)
        */
        .jssora12l, .jssora12r {
            display: block;
            position: absolute;
            /* size of arrow element */
            width: 30px;
            height: 46px;
            cursor: pointer;
            background: url(/templates/SliderCore/a12.png) no-repeat;
            overflow: hidden;
        }
        .jssora12l { background-position: -16px -37px; }
        .jssora12r { background-position: -75px -37px; }
        .jssora12l:hover { background-position: -136px -37px; }
        .jssora12r:hover { background-position: -195px -37px; }
        .jssora12l.jssora12ldn { background-position: -256px -37px; }
        .jssora12r.jssora12rdn { background-position: -315px -37px; }
    </style>
    <!-- Arrow Left -->
    <span id="SliderArrowLeft" u="arrowleft" class="jssora12l" style="top: 102px; left: 0px;">
    </span>
    <!-- Arrow Right -->
    <span id="SliderArrowRight" u="arrowright" class="jssora12r" style="top: 102px; right: 0px;">
    </span>
    <!--#endregion Arrow Navigator Skin End -->

    <!--#region Bullet Navigator Skin Begin -->
    <!-- Help: http://www.jssor.com/development/slider-with-bullet-navigator-jquery.html -->
    <style>
        /* jssor slider bullet navigator skin 10 css */
        /*
        .jssorb10 div           (normal)
        .jssorb10 div:hover     (normal mouseover)
        .jssorb10 .av           (active)
        .jssorb10 .av:hover     (active mouseover)
        .jssorb10 .dn           (mousedown)
        */
        .jssorb10 {
            position: absolute;
        }
        .jssorb10 div, .jssorb10 div:hover, .jssorb10 .av {
            position: absolute;
            /* size of bullet elment */
            width: 11px;
            height: 11px;
            background: url(/templates/SliderCore/b10.png) no-repeat;
            overflow: hidden;
            cursor: pointer;
        }
        .jssorb10 div { background-position: -10px -10px; }
        .jssorb10 div:hover, .jssorb10 .av:hover { background-position: -40px -10px; }
        .jssorb10 .av { background-position: -70px -10px; }
        .jssorb10 .dn, .jssorb10 .dn:hover { background-position: -100px -10px; }
    </style>
    <!-- bullet navigator container -->
    <div u="navigator" class="jssorb10" style="bottom: 16px; right: 6px;">
        <!-- bullet navigator item prototype -->
        <div u="prototype"></div>
    </div>
    <!--#endregion Bullet Navigator Skin End -->
</div>
</body>
</html>

JavaScript

<script src="jquery-2.1.3.min.js"></script>
<script src="jssor.slider.min.js"></script>
<script>
    $(document).ready(function () {
        var _SlideshowTransitions = [
            {$Duration:1200,$Opacity:2} //Fade
        ];
        var options = {
            $AutoPlay: true,
            $FillMode: 5,
            $DragOrientation: 0,
            $AutoPlayInterval: 3000,
            $LazyLoading: 1,
            $ArrowNavigatorOptions: {                       
                $Class: $JssorArrowNavigator$,              
                $ChanceToShow: 1,                           
                $AutoCenter: 2,
                $Steps: 1 
            },
            $BulletNavigatorOptions: { 
                $Class: $JssorBulletNavigator$,  
                $ChanceToShow: 2,  
                $AutoCenter: 1, 
                $Steps: 1,        
                $Lanes: 1,  
                $SpacingX: 10,       
                $SpacingY: 10,          
                $Orientation: 1           
            },
            $SlideshowOptions: {  
                $Class: $JssorSlideshowRunner$, 
                $Transitions: _SlideshowTransitions, 
                $TransitionsOrder: 1,            
                $ShowLink: false           
            }
        };

        $.clientCoords = function(){
           if ($('html').is('.ie6, .ie7, .ie8, .ie9')){
                return {
                    w:document.documentElement.offsetWidth,
                    h:document.documentElement.offsetHeight
                }
            }
            else
                return {w:window.innerWidth, h:window.innerHeight}
        }

        var MainDiv = $("#Slider");
        var SlidesDiv = $("#Slides");
        var client = $.clientCoords();
        MainDiv.css("height", client.h+ "px").css("width", client.w+"px");
        SlidesDiv.css("height",client.h+ "px").css("width",client.w+"px");

        var Slider = new $JssorSlider$('Slider', options);

        function ScaleSlider() {
            Slider.$ScaleWidth($('#Slider').parent().width());                
        }
        ScaleSlider();

        $(window).bind('resizeEnd', function() {
            ScaleSlider();
        });

        $(window).resize(function() {
            if(this.resizeTO) 
                  clearTimeout(this.resizeTO);
            this.resizeTO = setTimeout(function() {
                $(this).trigger('resizeEnd');
            }, 500);
        });
    });
</script>

是否有任何其他方法可以调整滑块区域的大小并重新定位 arrows/bullets？

我认为使用 jquery 缩放滑块后重新定位箭头不会有问题。但是如何在自动播放时调整 jssor 滑块的大小并且不重新启动？

我尝试使用

MainDiv.css('width', newWidth+'px').css('height',newHeight+'px');
SlidesDiv.css('width', newWidth+'px').css('height',newHeight+'px');

但这并不影响运行滑块。它保持自动播放开始时的大小。

Answer 1

您可以将 $Scale: false 添加到 $ArrowNavigatorOptions 和 $BulletNavigatorOptions 以防止其调整大小。

$ArrowNavigatorOptions: {                       
    $Class: $JssorArrowNavigator$,              
    $ChanceToShow: 1,                           
    $AutoCenter: 2,
    $Steps: 1,
    $Scale: false
},
$BulletNavigatorOptions: { 
    $Class: $JssorBulletNavigator$,  
    $ChanceToShow: 2,  
    $AutoCenter: 1, 
    $Steps: 1,        
    $Lanes: 1,  
    $SpacingX: 10,       
    $SpacingY: 10,          
    $Orientation: 1,
    $Scale: false
},

希望对您有所帮助。

JSSOR 比例尺：保持项目符号和箭头的大小

JSSOR Scale Size: Keep Size of Bullets and Arrows

javascript

jquery

jssor