Jssor Silder圖像在野生動物園中質量下降

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> 

在演示中，圖像在野生動物園中質量下降，但是在其他瀏覽器中可以。

如何通過程序解決此問題？

有一些相關的問題，告訴他們手動更改原始圖像的大小以適合容器，但是由於某種原因，我無法手動更改大小，必須通過程序進行更改。

我認為它需要修改有關如何生成滑塊圖像的“ jssor.slider.js”或“ jssor.slider.js”，但我不知道這是否是正確的方法。

誰知道“ jssor滑塊”會幫助我嗎？ 謝謝！！！

Answer 1

我在Safari和JSSOR中也遇到了這個問題。 Safari對於指定的圖像尺寸與實際的圖像尺寸非常挑剔，其他主要瀏覽器似乎都忽略了它，而采用了響應代碼。 標准演示（以及代碼示例中使用的圖像，除非您進行了更改，否則它們）的尺寸為600x300px，但是您為滑塊容器和滑塊本身都指定了420x245。 將這兩個值更改為您正在使用的圖像的實際大小，Safari即可正常工作。

Answer 2

你有視網膜顯示屏嗎？

Safari將圖像調整為顯示的幻燈片大小，但效果不佳，因此看起來模糊。 在Retina顯示器上更是如此，因為它們的分辨率為72dpi，而不是144。

解決方案是禁用JSSOR中的HardWare Acceleration，如本文所述

嘗試將其添加到您的JSSOR選項中：

$HWA: false

Answer 3

我注意到您將原始滑塊的尺寸設置為'width：420px; 高度：245像素；'。 請增大原始尺寸。

您知道，當您制作較小的滑塊並將其縮放到更大的尺寸時，它可能看起來很模糊。 但是，如果您制作較大的滑塊並將其縮放為較小的尺寸，則不會失去質量（在Safari中）。