Question

我正在使用最新版本的JSSOR Slider（jssor.slider.mini.js）和JQuery（http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js）开发网页。

JSSOR Slider适用于Chrome和Firefox，但我对IE11有很多问题。

首先，滑块应该居中（在Chrome＆amp; FF中有效），但设置为硬左。

其次，幻灯片应该通过淡入淡出过渡（在Chrome＆amp; FF中有效），但实际上是向左滑动而不会褪色。

以下代码：

<!DOCTYPE html>
<html lang="en-gb">
  <head>
    <meta charset="UTF-8">
    <title>Home</title>
    <meta name="viewport" content="width=1638">
    <link rel="Stylesheet" type="text/css" href="css/slider.css" /> 
    <!-- script type="text/javascript" src="scr/jquery-2.1.3.min.js"></script -->
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
    <!-- JSSOR works with all jquery version from 1.x to 2.x -->
    <script src="scr/jssor/js/jssor.slider.mini.js"></script>
    <script>

        $(document).ready(function()
        {
            //Define an array of slideshow transition code
            var _SlideshowTransitions = [
            { $Duration: 3600, $Opacity: 2 }
            ];

            var options = {
                $SlideDuration: 500,                               //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
                $DragOrientation: 1,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
                $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
                $AutoPlayInterval: 2000,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
                $SlideshowOptions: {                                //[Optional] Options to specify and enable slideshow or not
                    $Class: $JssorSlideshowRunner$,                 //[Required] Class to create instance of slideshow
                    $Transitions: _SlideshowTransitions,            //[Required] An array of slideshow transitions to play slideshow
                    $TransitionsOrder: 0,                           //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
                    $PlayOrientation: 1,                            //[Optional] Direction of play, 1 horizontal, 2 vertical
                    $PauseOnHover: 3,                               //[Optional] Direction 0: no pause, 1: pause for desktop, 2: pause for touch device, 3: pause for
                                                                    //           desktop and touch device, 4: freeze for desktop, 8: freeze for touch device, 
                                                                    //           12: freeze for desktop and touch device, default value is 1
                    $ShowLink: false                                 //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
                }

            };
            var jssor_slider1 = new $JssorSlider$('SliderContainer', options);

             //this will be triggered when object is clicked
            $("#SliderCTA").click(function()
            {
                document.location.href = "main.html";
            }); 

        });      
    </script>
  </head>
    <body>
        <div style="width:100%; margin: 0 auto; text-align: center;">
            <div id="SliderContainer" class="Slider">
                <div u="slides" class="SlideContainer">
                    <div><img u="image" src="img/large-blinds/01-compressed.jpg"  alt="" />
                    </div>
                    <div><img u="image" src="img/large-blinds/06-compressed.jpg"  alt="" />
                    </div>
                    <div><img u="image" src="img/large-blinds/02-compressed.jpg"  alt="" />
                    </div>
                    <div><img u="image" src="img/large-blinds/03-compressed.jpg"  alt="" />
                    </div>
                    <div><img u="image" src="img/large-blinds/07-compressed.jpg"  alt="" />
                    </div>
                    <div><img u="image" src="img/large-blinds/04-compressed.jpg"  alt="" />
                    </div>
                    <div><img u="image" src="img/large-blinds/05-compressed.jpg"  alt="" />
                    </div>
                </div>
                <div style="position: absolute; top: 550px; left: 0px; width: 740px; height: 50px; background: #205900;display: table-cell;"></div>
                <div id="SliderCTA">Find out more ...</div>
            </div>
        </div>
    </body>
</html>

这里是来自slider.css的相关CSS：

.Slider
{
  margin:0px auto;
  position: absolute;
  top: 0px; 
  left: 0px; 
  bottom: 0px; 
  right: 0px;
  width: 960px; 
  height: 500px;
}

.SlideContainer
{
    position: absolute; 
    left: 0px; 
    top: 50px; 
    width: 960px; 
    height: 500px;
    cursor: move; 
    overflow: hidden;
}

我有：

将位置从绝对更改为相对，并没有任何区别。
将％尺寸更改为固定尺寸
使用＆＃34; px＆＃34;毕竟尺寸
尝试了JSSOR中的所有选项

如果有人能够指出阻止IE在IE中正常工作的错误或遗漏，我将非常感激。

Answer 1

我的工作正常。我想你必须再检查一次。

顺便说一句，要与margin: 0 auto;合作，强烈建议您设置position: relative;

.Slider
{
  margin:0px auto;
  position: relative;
  ...
}

Answer 2

答案不是JSSOR代码的问题，而是IE11的问题。

看起来似乎是：

<!DOCTYPE html>

声明本身是不够的。没有这个IE11（和10,9）进入默认的怪癖模式并模拟IE7。我发现 head 部分中的 meta 标记强制它使用最新版本模式：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

我对任何评论感兴趣，我希望这可以帮助其他人解决这个问题！

在IE11中使用JSSOR Slider

2 个答案: