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

Slider doesn't autostart in Explorer 11

我一直无法让此代码在 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 和其他一些东西 - 没有任何改变。

感谢任何线索或建议

您的 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; ">