Question

新版Jssor不会出现此问题。

      jQuery(document).ready(function ($) {
          var options = {
              $AutoPlay: true,

              $PauseOnHover: true, //[Optional] Whether to pause when mouse over if a slideshow is auto playing, default value is false

              $ArrowKeyNavigation: true, //Allows arrow key to navigate or not
              $SlideWidth: 141, //[Optional] Width of every slide in pixels, the default is width of 'slides' container
              $SlideHeight: 200, //[Optional] Height of every slide in pixels, the default is width of 'slides' container
              $SlideSpacing: 25, //Space between each slide in pixels
              $DisplayPieces: 3, //Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
              $ParkingPosition: 0, //The offset position to park slide (this options applys only when slideshow disabled).

              $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: 2, //[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$("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.min(parentWidth, 800));
              else window.setTimeout(ScaleSlider, 30);
          }

          ScaleSlider();

          if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
              $(window).bind('resize', ScaleSlider);
          }
          //if (navigator.userAgent.match(/(iPhone|iPod|iPad)/)) {
          //    $(window).bind("orientationchange", ScaleSlider);
          //}
          //responsive code end

      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://www.jssor.com/js/jssor.slider.js"></script>
<script src="http://www.jssor.com/js/jssor.js"></script>
<div id="slider1_container" style="position: relative; top: 0px; left:0 px; width: 420px;
        height: 245px;">
    <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 420px; height: 245px;
            overflow: hidden;">
        <div>
            <img u="image" src="http://www.jssor.com/img/landscape/02.jpg" class="tissue_image" />
        </div>
        <div>
            <img u="image" src="http://www.jssor.com/img/landscape/03.jpg" class="tissue_image" />
        </div>
        <div>
            <img u="image" src="http://www.jssor.com/img/landscape/04.jpg" class="tissue_image" />
        </div>
        <div>
            <img u="image" src="http://www.jssor.com/img/landscape/05.jpg" class="tissue_image" />
        </div>
    </div>
</div>

在Demo中，图像在Safari中失去了质量，但在其他浏览器中也没问题。

如何通过程序解决这个问题？

有一些相关的问题，告诉他们手动更改原始图像大小以适应容器，但由于某种原因，我不能手动改变大小，它必须通过程序。

我认为需要修改“jssor.slider.js”或“jssor.slider.js”关于如何生成滑块图像，但我不知道这是否是正确的方法。

任何知道“jssor slider”的人会帮助我吗？感谢!!!

Answer 1

我也遇到过Safari和JSSOR这个问题。 Safari对于指定的图像尺寸与实际图像尺寸非常挑剔，其他主流浏览器似乎忽略它以支持响应代码。标准演示中使用的图像（以及代码示例中的图像除非您更改它们）是600x300px，但是您为滑块容器和幻灯片本身指定了420x245。将这两个值更改为您正在使用的图像的实际大小，Safari将正常工作。

Answer 2

你有Retina显示器吗？

Safari会根据显示的幻灯片大小调整图片大小，但会很糟糕，因此它们会显得模糊不清。 Retina显示器更是如此，因为它们在72dpi而不是144.

解决方案是在JSSOR中禁用HardWare加速，详见this post

尝试将此添加到您的JSSOR选项中：

$HWA: false

Answer 3

我注意到你制作的原始滑块尺寸为宽度：420px;身高：245px;＆＃39;。请将原始尺寸做大。

你知道，当你制作一个较小的滑块并将其缩放到更大的尺寸时，它可能看起来很模糊。但是如果你制作大滑块并将其缩放到更小的尺寸，它就不会失去质量（在Safari中）。

Jssor滑块图像在safari中失去了质量

3 个答案: