SP2007使IE在运行jssor代码时挂起

SP 2007 makes IE to hang while running a jssor code

本文关键字：代码挂起 jssor 运行 IE SP2007 更新时间：2023-09-26

我在CEWP的Sharepoint 2007页面上使用了一个带有垂直导航的jssor滑块（没有jquery版本），我已经替换了SP图像库下存储的所有图像链接，jssor.slider.min.js文件也已上传到该网站下，代码中的链接也已更新。

当页面加载滑块开始工作时，但有一分钟整个Internet Explore都静止了，我无法点击任何内容，一分钟后一切正常。令人惊讶的事实是，即使IE处于静止状态，滑块也会正确加载，并且不会引发控制台错误。在Chrome上打开同一个页面，效果非常好。

我试着做jssor网站上提到的所有事情来提高性能，但没有成功。我试过在jquery中使用滑块版本，但结果是一样的。

请注意，当我尝试在IE上作为非共享点平台打开代码时，滑块工作良好。

有人能帮我解决这个问题吗。

<!-- #region Jssor Slider Begin -->
<!-- Generated by Jssor Slider Maker. -->
<!-- This demo works without jquery library. -->
<script type="text/javascript" src="/scripts/jssor.slider.min.js"></script>
<!-- use jssor.slider.debug.js instead for debug -->
<script>
    jssor_1_slider_init = function() {
        var jssor_1_SlideshowTransitions = [
          {$Duration:1200,$Zoom:1,$Easing:{$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$OutQuad},$Opacity:2},
          {$Duration:1000,$Zoom:11,$SlideOut:true,$Easing:{$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear},$Opacity:2},
          {$Duration:1200,$Zoom:1,$Rotate:1,$During:{$Zoom:[0.2,0.8],$Rotate:[0.2,0.8]},$Easing:{$Zoom:$Jease$.$Swing,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$Swing},$Opacity:2,$Round:{$Rotate:0.5}},
          {$Duration:1000,$Zoom:11,$Rotate:1,$SlideOut:true,$Easing:{$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.8}},
          {$Duration:1200,x:0.5,$Cols:2,$Zoom:1,$Assembly:2049,$ChessMode:{$Column:15},$Easing:{$Left:$Jease$.$InCubic,$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
          {$Duration:1200,x:4,$Cols:2,$Zoom:11,$SlideOut:true,$Assembly:2049,$ChessMode:{$Column:15},$Easing:{$Left:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear},$Opacity:2},
          {$Duration:1200,x:0.6,$Zoom:1,$Rotate:1,$During:{$Left:[0.2,0.8],$Zoom:[0.2,0.8],$Rotate:[0.2,0.8]},$Easing:{$Left:$Jease$.$Swing,$Zoom:$Jease$.$Swing,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$Swing},$Opacity:2,$Round:{$Rotate:0.5}},
          {$Duration:1000,x:-4,$Zoom:11,$Rotate:1,$SlideOut:true,$Easing:{$Left:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.8}},
          {$Duration:1200,x:-0.6,$Zoom:1,$Rotate:1,$During:{$Left:[0.2,0.8],$Zoom:[0.2,0.8],$Rotate:[0.2,0.8]},$Easing:{$Left:$Jease$.$Swing,$Zoom:$Jease$.$Swing,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$Swing},$Opacity:2,$Round:{$Rotate:0.5}},
          {$Duration:1000,x:4,$Zoom:11,$Rotate:1,$SlideOut:true,$Easing:{$Left:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.8}},
          {$Duration:1200,x:0.5,y:0.3,$Cols:2,$Zoom:1,$Rotate:1,$Assembly:2049,$ChessMode:{$Column:15},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$OutQuad,$Rotate:$Jease$.$InCubic},$Opacity:2,$Round:{$Rotate:0.7}},
          {$Duration:1000,x:0.5,y:0.3,$Cols:2,$Zoom:1,$Rotate:1,$SlideOut:true,$Assembly:2049,$ChessMode:{$Column:15},$Easing:{$Left:$Jease$.$InExpo,$Top:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.7}},
          {$Duration:1200,x:-4,y:2,$Rows:2,$Zoom:11,$Rotate:1,$Assembly:2049,$ChessMode:{$Row:28},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$OutQuad,$Rotate:$Jease$.$InCubic},$Opacity:2,$Round:{$Rotate:0.7}},
          {$Duration:1200,x:1,y:2,$Cols:2,$Zoom:11,$Rotate:1,$Assembly:2049,$ChessMode:{$Column:19},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$OutQuad,$Rotate:$Jease$.$InCubic},$Opacity:2,$Round:{$Rotate:0.8}}
        ];
        var jssor_1_options = {
          $AutoPlay: true,
          $SlideshowOptions: {
            $Class: $JssorSlideshowRunner$,
            $Transitions: jssor_1_SlideshowTransitions,
            $TransitionsOrder: 1
          },
          $ArrowNavigatorOptions: {
            $Class: $JssorArrowNavigator$
          },
          $ThumbnailNavigatorOptions: {
            $Class: $JssorThumbnailNavigator$,
            $Rows: 2,
            $Cols: 6,
            $SpacingX: 14,
            $SpacingY: 12,
            $Orientation: 2,
            $Align: 156
          }
        };
        var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
        //responsive code begin
        //you can remove responsive code if you don't want the slider scales while window resizing
        function ScaleSlider() {
            var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
            if (refSize) {
                refSize = Math.min(refSize, 960);
                refSize = Math.max(refSize, 300);
                jssor_1_slider.$ScaleWidth(refSize);
            }
            else {
                window.setTimeout(ScaleSlider, 30);
            }
        }
        ScaleSlider();
        $Jssor$.$AddEvent(window, "load", ScaleSlider);
        $Jssor$.$AddEvent(window, "resize", ScaleSlider);
        $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
        //responsive code end
    };
</script>
<style>
    /* jssor slider arrow navigator skin 05 css */
    /*
    .jssora05l                  (normal)
    .jssora05r                  (normal)
    .jssora05l:hover            (normal mouseover)
    .jssora05r:hover            (normal mouseover)
    .jssora05l.jssora05ldn      (mousedown)
    .jssora05r.jssora05rdn      (mousedown)
    */
    .jssora05l, .jssora05r {
        display: block;
        position: absolute;
        /* size of arrow element */
        width: 40px;
        height: 40px;
        cursor: pointer;
        background: url('/PublishingImages/img/a17.png') no-repeat;
        overflow: hidden;
    }
    .jssora05l { background-position: -10px -40px; }
    .jssora05r { background-position: -70px -40px; }
    .jssora05l:hover { background-position: -130px -40px; }
    .jssora05r:hover { background-position: -190px -40px; }
    .jssora05l.jssora05ldn { background-position: -250px -40px; }
    .jssora05r.jssora05rdn { background-position: -310px -40px; }
    /* jssor slider thumbnail navigator skin 01 css */
    /*
    .jssort01-99-66 .p            (normal)
    .jssort01-99-66 .p:hover      (normal mouseover)
    .jssort01-99-66 .p.pav        (active)
    .jssort01-99-66 .p.pdn        (mousedown)
    */
    .jssort01-99-66 .p {
        position: absolute;
        top: 0;
        left: 0;
        width: 99px;
        height: 66px;
    }
    .jssort01-99-66 .t {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }
    .jssort01-99-66 .w {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
    }
    .jssort01-99-66 .c {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 95px;
        height: 62px;
        border: #000 2px solid;
        box-sizing: content-box;
        background: url('/PublishingImages/img/t01.png') -800px -800px no-repeat;
        _background: none;
    }
    .jssort01-99-66 .pav .c {
        top: 2px;
        _top: 0px;
        left: 2px;
        _left: 0px;
        width: 95px;
        height: 62px;
        border: #000 0px solid;
        _border: #fff 2px solid;
        background-position: 50% 50%;
    }
    .jssort01-99-66 .p:hover .c {
        top: 0px;
        left: 0px;
        width: 97px;
        height: 64px;
        border: #fff 1px solid;
        background-position: 50% 50%;
    }
    .jssort01-99-66 .p.pdn .c {
        background-position: 50% 50%;
        width: 95px;
        height: 62px;
        border: #000 2px solid;
    }
    * html .jssort01-99-66 .c, * html .jssort01-99-66 .pdn .c, * html .jssort01-99-66 .pav .c {
        /* ie quirks mode adjust */
        width /**/: 99px;
        height /**/: 66px;
    }
</style>

<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 960px; height: 480px; overflow: hidden; visibility: hidden; background-color: #24262e;">
    <!-- Loading Screen -->
    <div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
        <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
        <div style="position:absolute;display:block;background:url('/PublishingImages/img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
    </div>
    <div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 240px; width: 720px; height: 480px; overflow: hidden;">
        <div data-p="150.00" style="display: none;">
            <img data-u="image" src="/PublishingImages/img/01.jpg" />
            <img data-u="thumb" src="/PublishingImages/img/thumb-01.jpg" />
        </div>
        <div data-p="150.00" style="display: none;">
            <img data-u="image" src="/PublishingImages/img/02.jpg" />
            <img data-u="thumb" src="/PublishingImages/img/thumb-02.jpg" />
        </div>
        <div data-p="150.00" style="display: none;">
            <img data-u="image" src="/PublishingImages/img/03.jpg" />
            <img data-u="thumb" src="/PublishingImages/img/thumb-03.jpg" />
        </div>
        <div data-p="150.00" style="display: none;">
            <img data-u="image" src="/PublishingImages/img/04.jpg" />
            <img data-u="thumb" src="/PublishingImages/img/thumb-04.jpg" />
        </div>
        <div data-p="150.00" style="display: none;">
            <img data-u="image" src="/PublishingImages/img/05.jpg" />
            <img data-u="thumb" src="/PublishingImages/img/thumb-05.jpg" />
        </div>
        <div data-p="150.00" style="display: none;">
            <img data-u="image" src="/PublishingImages/img/06.jpg" />
            <img data-u="thumb" src="/PublishingImages/img/thumb-06.jpg" />
        </div>
        <div data-p="150.00" style="display: none;">
            <img data-u="image" src="/PublishingImages/img/07.jpg" />
            <img data-u="thumb" src="/PublishingImages/img/thumb-07.jpg" />
        </div>
        <div data-p="150.00" style="display: none;">
            <img data-u="image" src="/PublishingImages/img/08.jpg" />
            <img data-u="thumb" src="/PublishingImages/img/thumb-08.jpg" />
        </div>
        <div data-p="150.00" style="display: none;">
            <img data-u="image" src="/PublishingImages/img/09.jpg" />
            <img data-u="thumb" src="/PublishingImages/img/thumb-09.jpg" />
        </div>
        <div data-p="150.00" style="display: none;">
            <img data-u="image" src="/PublishingImages/img/10.jpg" />
            <img data-u="thumb" src="/PublishingImages/img/thumb-10.jpg" />
        </div>
        <div data-p="150.00" style="display: none;">
            <img data-u="image" src="/PublishingImages/img/11.jpg" />
            <img data-u="thumb" src="/PublishingImages/img/thumb-11.jpg" />
        </div>
        <div data-p="150.00" style="display: none;">
            <img data-u="image" src="/PublishingImages/img/12.jpg" />
            <img data-u="thumb" src="/PublishingImages/img/thumb-12.jpg" />
        </div>
        <div data-p="150.00" style="display: none;">
            <img data-u="image" src="/PublishingImages/img/13.jpg" />
            <img data-u="thumb" src="/PublishingImages/img/thumb-13.jpg" />
        </div>
        <div data-p="150.00" style="display: none;">
            <img data-u="image" src="/PublishingImages/img/14.jpg" />
            <img data-u="thumb" src="/PublishingImages/img/thumb-14.jpg" />
        </div>
        <a data-u="ad" href="http://www.jssor.com" style="display:none">jQuery Slider</a>
    </div>
    <!-- Thumbnail Navigator -->
    <div data-u="thumbnavigator" class="jssort01-99-66" style="position:absolute;left:0px;top:0px;width:240px;height:480px;" data-autocenter="2">
        <!-- Thumbnail Item Skin Begin -->
        <div data-u="slides" style="cursor: default;">
            <div data-u="prototype" class="p">
                <div class="w">
                    <div data-u="thumbnailtemplate" class="t"></div>
                </div>
                <div class="c"></div>
            </div>
        </div>
        <!-- Thumbnail Item Skin End -->
    </div>
    <!-- Arrow Navigator -->
    <span data-u="arrowleft" class="jssora05l" style="top:158px;left:248px;width:40px;height:40px;" data-autocenter="2"></span>
    <span data-u="arrowright" class="jssora05r" style="top:158px;right:8px;width:40px;height:40px;" data-autocenter="2"></span>
</div>
<script>
    jssor_1_slider_init();
</script>
<!-- #endregion Jssor Slider End -->

jssor.slider源代码似乎有一个额外的分支，如果它检测到当前浏览器模式不支持某些功能，就会关闭该分支。

if (!H())
     O = E(O, { $ScaleX: ["scaleX", 2], $ScaleY: ["scaleY", 2], $TranslateZ: ["translateZ", 1] });  [object]

它通过检查用户代理字符串来完成此操作；小于11的IE的任何版本都将触发代码的额外分支。很可能是您的SharePoint母版页（或IE兼容性视图设置）迫使浏览器进入IE8模式，这就是为什么它在SharePoint上运行缓慢，但通常是独立运行的原因。

jssor_1_slider_init = function() {
        var jssor_1_SlideshowTransitions = [
          {$Duration:1200,$Zoom:1,$Easing:{$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$OutQuad},$Opacity:2},
          {$Duration:1000,$Zoom:11,$SlideOut:true,$Easing:{$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear},$Opacity:2},
          {$Duration:1200,$Zoom:1,$Rotate:1,$During:{$Zoom:[0.2,0.8],$Rotate:[0.2,0.8]},$Easing:{$Zoom:$Jease$.$Swing,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$Swing},$Opacity:2,$Round:{$Rotate:0.5}},
          {$Duration:1000,$Zoom:11,$Rotate:1,$SlideOut:true,$Easing:{$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.8}},
          {$Duration:1200,x:0.5,$Cols:2,$Zoom:1,$Assembly:2049,$ChessMode:{$Column:15},$Easing:{$Left:$Jease$.$InCubic,$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
          {$Duration:1200,x:4,$Cols:2,$Zoom:11,$SlideOut:true,$Assembly:2049,$ChessMode:{$Column:15},$Easing:{$Left:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear},$Opacity:2},
          {$Duration:1200,x:0.6,$Zoom:1,$Rotate:1,$During:{$Left:[0.2,0.8],$Zoom:[0.2,0.8],$Rotate:[0.2,0.8]},$Easing:{$Left:$Jease$.$Swing,$Zoom:$Jease$.$Swing,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$Swing},$Opacity:2,$Round:{$Rotate:0.5}},
          {$Duration:1000,x:-4,$Zoom:11,$Rotate:1,$SlideOut:true,$Easing:{$Left:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.8}},
          {$Duration:1200,x:-0.6,$Zoom:1,$Rotate:1,$During:{$Left:[0.2,0.8],$Zoom:[0.2,0.8],$Rotate:[0.2,0.8]},$Easing:{$Left:$Jease$.$Swing,$Zoom:$Jease$.$Swing,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$Swing},$Opacity:2,$Round:{$Rotate:0.5}},
          {$Duration:1000,x:4,$Zoom:11,$Rotate:1,$SlideOut:true,$Easing:{$Left:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.8}},
          {$Duration:1200,x:0.5,y:0.3,$Cols:2,$Zoom:1,$Rotate:1,$Assembly:2049,$ChessMode:{$Column:15},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$OutQuad,$Rotate:$Jease$.$InCubic},$Opacity:2,$Round:{$Rotate:0.7}},
          {$Duration:1000,x:0.5,y:0.3,$Cols:2,$Zoom:1,$Rotate:1,$SlideOut:true,$Assembly:2049,$ChessMode:{$Column:15},$Easing:{$Left:$Jease$.$InExpo,$Top:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.7}},
          {$Duration:1200,x:-4,y:2,$Rows:2,$Zoom:11,$Rotate:1,$Assembly:2049,$ChessMode:{$Row:28},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$OutQuad,$Rotate:$Jease$.$InCubic},$Opacity:2,$Round:{$Rotate:0.7}},
          {$Duration:1200,x:1,y:2,$Cols:2,$Zoom:11,$Rotate:1,$Assembly:2049,$ChessMode:{$Column:19},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$OutQuad,$Rotate:$Jease$.$InCubic},$Opacity:2,$Round:{$Rotate:0.8}}
        ];
        var jssor_1_options = {
          $AutoPlay: true,
          $SlideshowOptions: {
            $Class: $JssorSlideshowRunner$,
            $Transitions: jssor_1_SlideshowTransitions,
            $TransitionsOrder: 1
          },
          $ArrowNavigatorOptions: {
            $Class: $JssorArrowNavigator$
          },
          $ThumbnailNavigatorOptions: {
            $Class: $JssorThumbnailNavigator$,
            $Rows: 2,
            $Cols: 6,
            $SpacingX: 14,
            $SpacingY: 12,
            $Orientation: 2,
            $Align: 156
          }
        };
        var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
        //responsive code begin
        //you can remove responsive code if you don't want the slider scales while window resizing
        function ScaleSlider() {
            var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
            if (refSize) {
                refSize = Math.min(refSize, 960);
                refSize = Math.max(refSize, 300);
                jssor_1_slider.$ScaleWidth(refSize);
            }
            else {
                window.setTimeout(ScaleSlider, 30);
            }
        }
        ScaleSlider();
        $Jssor$.$AddEvent(window, "load", ScaleSlider);
        $Jssor$.$AddEvent(window, "resize", ScaleSlider);
        $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
        //responsive code end
    };
jssor_1_slider_init();

.jssora05l, .jssora05r {
        display: block;
        position: absolute;
        /* size of arrow element */
        width: 40px;
        height: 40px;
        cursor: pointer;
        background: url('/PublishingImages/img/a17.png') no-repeat;
        overflow: hidden;
    }
    .jssora05l { background-position: -10px -40px; }
    .jssora05r { background-position: -70px -40px; }
    .jssora05l:hover { background-position: -130px -40px; }
    .jssora05r:hover { background-position: -190px -40px; }
    .jssora05l.jssora05ldn { background-position: -250px -40px; }
    .jssora05r.jssora05rdn { background-position: -310px -40px; }
 .jssort01-99-66 .p {
        position: absolute;
        top: 0;
        left: 0;
        width: 99px;
        height: 66px;
    }
    .jssort01-99-66 .t {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }
    .jssort01-99-66 .w {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
    }
    .jssort01-99-66 .c {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 95px;
        height: 62px;
        border: #000 2px solid;
        box-sizing: content-box;
        background: url('/PublishingImages/img/t01.png') -800px -800px no-repeat;
        _background: none;
    }
    .jssort01-99-66 .pav .c {
        top: 2px;
        _top: 0px;
        left: 2px;
        _left: 0px;
        width: 95px;
        height: 62px;
        border: #000 0px solid;
        _border: #fff 2px solid;
        background-position: 50% 50%;
    }
    .jssort01-99-66 .p:hover .c {
        top: 0px;
        left: 0px;
        width: 97px;
        height: 64px;
        border: #fff 1px solid;
        background-position: 50% 50%;
    }
    .jssort01-99-66 .p.pdn .c {
        background-position: 50% 50%;
        width: 95px;
        height: 62px;
        border: #000 2px solid;
    }
    * html .jssort01-99-66 .c, * html .jssort01-99-66 .pdn .c, * html .jssort01-99-66 .pav .c {
        /* ie quirks mode adjust */
        width /**/: 99px;
        height /**/: 66px;
    }

<script src="https://www.jssor.com/script/jssor.slider.min.js"></script>
 
<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 960px; height: 480px; overflow: hidden; visibility: hidden; background-color: #24262e;">
    <!-- Loading Screen -->
    <div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
        <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
        <div style="position:absolute;display:block;background:url('/PublishingImages/img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
    </div>
    <div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 240px; width: 720px; height: 480px; overflow: hidden;">
        <div data-p="150.00" style="display: none;">
            <img data-u="image" src="http://placehold.it/150x150/df7000" />
            <img data-u="thumb" src="http://placehold.it/150x150/df7000" />
        </div>
        <div data-p="150.00" style="display: none;">
            <img data-u="image" src="http://placehold.it/150x150" />
            <img data-u="thumb" src="http://placehold.it/150x150" />
        </div>
        <div data-p="150.00" style="display: none;">
            <img data-u="image" src="http://placehold.it/150x150/000000" />
            <img data-u="thumb" src="http://placehold.it/150x150/000000" />
        </div>
        <div data-p="150.00" style="display: none;">
            <img data-u="image" src="http://placehold.it/150x150/ff0000" />
            <img data-u="thumb" src="http://placehold.it/150x150/ff0000" />
        </div>
        <div data-p="150.00" style="display: none;">
            <img data-u="image" src="http://placehold.it/150x150/00ff00" />
            <img data-u="thumb" src="http://placehold.it/150x150/00ff00" />
        </div>
        <div data-p="150.00" style="display: none;">
            <img data-u="image" src="http://placehold.it/150x150/0000ff" />
            <img data-u="thumb" src="http://placehold.it/150x150/0000ff" />
        </div>
        <div data-p="150.00" style="display: none;">
            <img data-u="image" src="http://placehold.it/150x150/555555" />
            <img data-u="thumb" src="http://placehold.it/150x150/555555" />
        </div>
        <div data-p="150.00" style="display: none;">
            <img data-u="image" src="http://placehold.it/150x150/234567" />
            <img data-u="thumb" src="http://placehold.it/150x150/234567" />
        </div>
        <div data-p="150.00" style="display: none;">
            <img data-u="image" src="http://placehold.it/150x150" />
            <img data-u="thumb" src="http://placehold.it/150x150" />
        </div>
        <div data-p="150.00" style="display: none;">
            <img data-u="image" src="http://placehold.it/150x150/449944" />
            <img data-u="thumb" src="http://placehold.it/150x150/449944" />
        </div>
        <div data-p="150.00" style="display: none;">
            <img data-u="image" src="http://placehold.it/150x150" />
            <img data-u="thumb" src="http://placehold.it/150x150" />
        </div>
        <div data-p="150.00" style="display: none;">
            <img data-u="image" src="http://placehold.it/150x150" />
            <img data-u="thumb" src="http://placehold.it/150x150" />
        </div>
        <div data-p="150.00" style="display: none;">
            <img data-u="image" src="http://placehold.it/150x150/87654321" />
            <img data-u="thumb" src="http://placehold.it/150x150/87654321" />
        </div>
        <div data-p="150.00" style="display: none;">
            <img data-u="image" src="http://placehold.it/150x150/12345678" />
            <img data-u="thumb" src="http://placehold.it/150x150/12345678" />
        </div>
        <a data-u="ad" href="http://www.jssor.com" style="display:none">jQuery Slider</a>
    </div>
    <!-- Thumbnail Navigator -->
    <div data-u="thumbnavigator" class="jssort01-99-66" style="position:absolute;left:0px;top:0px;width:240px;height:480px;" data-autocenter="2">
        <!-- Thumbnail Item Skin Begin -->
        <div data-u="slides" style="cursor: default;">
            <div data-u="prototype" class="p">
                <div class="w">
                    <div data-u="thumbnailtemplate" class="t"></div>
                </div>
                <div class="c"></div>
            </div>
        </div>
        <!-- Thumbnail Item Skin End -->
    </div>
    <!-- Arrow Navigator -->
    <span data-u="arrowleft" class="jssora05l" style="top:158px;left:248px;width:40px;height:40px;" data-autocenter="2"></span>
    <span data-u="arrowright" class="jssora05r" style="top:158px;right:8px;width:40px;height:40px;" data-autocenter="2"></span>
</div>