我正在使用jssor滑块进行幻灯片放映,在IE11和Firefox中运行良好。但是在Chrome中,它会在某些(但不是全部)图像的右边缘留下深色垂直线。它也会在随机启动时调整图片大小以使图片太大。图片以335x260像素存储,滑块宽度设置为335像素。这很疯狂,我没有看到问题的来源,我正在使用他们的代码。我的猜测是一个简单的错误,但是我看不到它,并且在做其他部分时一直在寻找几天。这是代码和css:
#PhotoShow {
clear: both;
float: left;
height: 260px;
width: 335px;
display: block;
margin-left: 0;
}
<div id="PhotoShow" >
<div id="slider1_container" style="position: relative; width: 335px;">
<!-- Slides Container -->
<div data-u="slides" style="cursor: move; position: absolute; width: 335px; height: 260px; overflow: hidden;">
<div><img data-u="image" src="photos/4JoeBonamassa.jpg" </div>
<div><img data-u="image" src="photos/4WarrenHaynes.jpg" ></div>
<div><img data-u="image" src="photos/4JeffBeck.jpg" ></div>
<div><img data-u="image" src="photos/4LeePomeroy.jpg"></div>
</div>
<!-- --------------------- -->
</div>
</div>
<script type="text/javascript" async>
jQuery(document).ready(function ($) {
var _SlideshowTransitions = [{$Duration:700,$Opacity:2, $Brother:{$Duration:1000,$Opacity:2}} ];
var _CaptionTransitions = [];
var startImgNumber =Math.floor((Math.random()*16)+1);
var options = {
$CaptionSliderOptions: {
$Class: $JssorCaptionSlider$,
$CaptionTransitions: _CaptionTransitions,
$PlayInMode: 1,
$PlayOutMode: 3},
$AutoPlay: true,
$DragOrientation: 1,
$AutoPlayInterval: 5000, // ADJUST!!!!
$FillMode: 1,
//$SlideHeight: 260,
$LazyLoading: 2,
//$PauseOnHover: 0,
$StartIndex: startImgNumber,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: _SlideshowTransitions,
$TransitionsOrder: 1,
$ShowLink: true
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
function ScaleSlider() {
var parentWidth = $('#slider1_container').parent().width();
if (parentWidth) {
jssor_slider1.$ScaleWidth(parentWidth);
}
else
{window.setTimeout(ScaleSlider, 30);}
}
//Scale slider after document ready
ScaleSlider();
//Scale slider while window load/resize/orientationchange.
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
});
</script>
答案 0 :(得分:0)
还不确定确切的问题是什么。
请始终保持&#39; top:0px;左:0px;宽度:... px;身高:... px;&#39;容器。
然后尝试将$ HWA选项设置为false。