Question

我无法将此代码用于IE11 - 它在Chrome和Firefox，Android Chrome，Opera上工作正常，而不是IE。在IE11中，我实际上可以看到图像堆叠在一起，直到它到达最后一个图像，然后它就停止了。最后一个图像失真（好像$ FillMode设置为0）。但是，虽然单击图像没有任何区别，但即使是最轻微的拖动也会触发它进入操作状态。它好像忽略了自动启动，但一旦轻推，该功能就可以工作。如果我什么都不做，它会无限期地加载到最后一张图像上。

头：

<script type="text/javascript" src="css/jssor.slider.js"></script>

<script 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,
            //$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>

HTML代码是：

<div id="PhotoShow" >

<div id="slider1_container" style="position: relative; top: 0px; left: 0px  width: 332px; height: 260px; ">
    <!-- Slides Container -->  

    <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 330px; height: 260px; overflow: hidden;">

        <div><img data-u="image" src="photos/pic1.jpg" title="Photo By me &copy;2015" alt=""/><div u="caption" t="transition_name1" style="position: absolute; top: 245px; left: 100px; width: 200px;height: 30px; color:#FFFBF0; font-size:x-small" >Courtesy of me &copy; 2015</div></div>

        <div><img data-u="image" src="photos/pic2.jpg" title="Photo By me &copy;2015"alt=""/><div u="caption" t="transition_name1" style="position: absolute; top: 245px; left: 125px; width: 200px;height: 30px; color:#ffffff; font-size:x-small"  >me &copy; 2015</div></div>

    .
    .
    .   16 images total

     </div>

   </div>
</div>

（可能我有额外/ div标签 - 这不是问题，只是一个错字），我完全不知道为什么它适用于除IE11之外的所有内容。似乎该功能根本不执行。我尝试过window.onload和其他一些东西 - 什么都不做。

感谢您提供任何线索或建议

Answer 1

html代码中缺少分号。

请替换

<div id="slider1_container" style="position: relative; top: 0px; left: 0px  width: 332px; height: 260px; ">

与

<div id="slider1_container" style="position: relative; top: 0px; left: 0px;  width: 332px; height: 260px; ">

滑块在Explorer 11中不会自动启动

1 个答案: