jssor滑块在侧面留下线条,在不需要时缩放

时间:2015-04-03 01:21:03

标签: css jssor

我正在使用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>

1 个答案:

答案 0 :(得分:0)

还不确定确切的问题是什么。

请始终保持&#39; top:0px;左:0px;宽度:... px;身高:... px;&#39;容器。

然后尝试将$ HWA选项设置为false。