2016-05-26 23 views
0

Ich versuche, ist zwei jssor Schieber in Sharepoint zu verwenden 2010jssor Schieber + Sharepoint 2010

haben 2 webparts in Sharepoint 2010 erstellt und CEWP HTML Referenz. linken Webpart sollte einen JSSOR Slider mit verschiedenen Thema & Bilder verwenden. rechten Webpart sollte einen anderen JSSOR Slider mit anderen Thema & Bilder verwenden.

Ich versuchte, aber nur einer würde erscheinen, wenn wir die Seite veröffentlichen. Nicht beide ?

LEFT HTML-Code:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title></title> 
</head> 
<body style="padding:0px; margin:0px; background-color:#fff;"> 

    <!-- The following codes demostrate jssor slider work independently without any other javascript library. --> 

    <script type="text/javascript" src="March 2016/js/jssor.slider-20.min.js"></script> 
    <!-- use jssor.slider-20.debug.js instead for debug --> 
    <script> 
     jssor_1_slider_init = function() { 

      var jssor_1_SlideshowTransitions = [ 
       {$Duration:1200,x:0.3,$During:{$Left:[0.3,0.7]},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
       {$Duration:1200,x:-0.3,$SlideOut:true,$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
       {$Duration:1200,x:-0.3,$During:{$Left:[0.3,0.7]},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
       {$Duration:1200,x:0.3,$SlideOut:true,$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
       {$Duration:1200,y:0.3,$During:{$Top:[0.3,0.7]},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
       {$Duration:1200,y:-0.3,$SlideOut:true,$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
       {$Duration:1200,y:-0.3,$During:{$Top:[0.3,0.7]},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
       {$Duration:1200,y:0.3,$SlideOut:true,$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
       {$Duration:1200,x:0.3,$Cols:2,$During:{$Left:[0.3,0.7]},$ChessMode:{$Column:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
       {$Duration:1200,x:0.3,$Cols:2,$SlideOut:true,$ChessMode:{$Column:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
       {$Duration:1200,y:0.3,$Rows:2,$During:{$Top:[0.3,0.7]},$ChessMode:{$Row:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
       {$Duration:1200,y:0.3,$Rows:2,$SlideOut:true,$ChessMode:{$Row:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
       {$Duration:1200,y:0.3,$Cols:2,$During:{$Top:[0.3,0.7]},$ChessMode:{$Column:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
       {$Duration:1200,y:-0.3,$Cols:2,$SlideOut:true,$ChessMode:{$Column:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
       {$Duration:1200,x:0.3,$Rows:2,$During:{$Left:[0.3,0.7]},$ChessMode:{$Row:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
       {$Duration:1200,x:-0.3,$Rows:2,$SlideOut:true,$ChessMode:{$Row:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
       {$Duration:1200,x:0.3,y:0.3,$Cols:2,$Rows:2,$During:{$Left:[0.3,0.7],$Top:[0.3,0.7]},$ChessMode:{$Column:3,$Row:12},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
       {$Duration:1200,x:0.3,y:0.3,$Cols:2,$Rows:2,$During:{$Left:[0.3,0.7],$Top:[0.3,0.7]},$SlideOut:true,$ChessMode:{$Column:3,$Row:12},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
       {$Duration:1200,$Delay:20,$Clip:3,$Assembly:260,$Easing:{$Clip:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
       {$Duration:1200,$Delay:20,$Clip:3,$SlideOut:true,$Assembly:260,$Easing:{$Clip:$Jease$.$OutCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
       {$Duration:1200,$Delay:20,$Clip:12,$Assembly:260,$Easing:{$Clip:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
       {$Duration:1200,$Delay:20,$Clip:12,$SlideOut:true,$Assembly:260,$Easing:{$Clip:$Jease$.$OutCubic,$Opacity:$Jease$.$Linear},$Opacity:2} 
      ]; 

      var jssor_1_options = { 
       $AutoPlay: true, 
       $SlideshowOptions: { 
       $Class: $JssorSlideshowRunner$, 
       $Transitions: jssor_1_SlideshowTransitions, 
       $TransitionsOrder: 1 
       }, 
       $ArrowNavigatorOptions: { 
       $Class: $JssorArrowNavigator$ 
       }, 
       $ThumbnailNavigatorOptions: { 
       $Class: $JssorThumbnailNavigator$, 
       $Cols: 8, 
       $SpacingX: 8, 
       $SpacingY: 8, 
       $Align: 360 
       } 
      }; 

      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 resizes 
      function ScaleSlider() { 
       var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth; 
       if (refSize) { 
        refSize = Math.min(refSize, 550); 
        jssor_1_slider.$ScaleWidth(refSize); 
       } 
       else { 
        window.setTimeout(ScaleSlider, 30); 
       } 
      } 
      ScaleSlider(); 
      $Jssor$.$AddEvent(window, "load", ScaleSlider); 
      $Jssor$.$AddEvent(window, "resize", $Jssor$.$WindowResizeFilter(window, 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('March 2016/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 .p   (normal) 
     .jssort01 .p:hover  (normal mouseover) 
     .jssort01 .p.pav  (active) 
     .jssort01 .p.pdn  (mousedown) 
     */ 
     .jssort01 .p { 
      position: absolute; 
      top: 0; 
      left: 0; 
      width: 80px; 
      height: 80px; 
     } 

     .jssort01 .t { 
      position: absolute; 
      top: 0; 
      left: 0; 
      width: 100%; 
      height: 100%; 
      border: none; 
     } 

     .jssort01 .w { 
      position: absolute; 
      top: 0px; 
      left: 0px; 
      width: 100%; 
      height: 100%; 
     } 

     .jssort01 .c { 
      position: absolute; 
      top: 0px; 
      left: 0px; 
      width: 80px; 
      height: 80px; 
      border: #fff 2px solid; 
      box-sizing: content-box; 
      background: url('March 2016/img/t01.png') -800px -800px no-repeat; 
      _background: none; 
     } 

     .jssort01 .pav .c { 
      top: 10px; 
      _top: 0px; 
      left: 10px; 
      _left: 0px; 
      width: 60px; 
      height: 60px; 
      border: #000 0px solid; 
      _border: #fff 2px solid; 
      background-position: 50% 50%; 
     } 

     .jssort01 .p:hover .c { 
      top: 0px; 
      left: 0px; 
      width: 80px; 
      height: 80px; 
      border: #fff 1px solid; 
      background-position: 50% 50%; 
     } 

     .jssort01 .p.pdn .c { 
      background-position: 50% 50%; 
      width: 80px; 
      height: 80px; 
      border: #fff 2px solid; 
     } 

     * html .jssort01 .c, * html .jssort01 .pdn .c, * html .jssort01 .pav .c { 
      /* ie quirks mode adjust */ 
      width /**/: 80px; 
      height /**/: 80px; 
     } 

    </style> 


    <div id="jssor_1" style="position: relative; margin: 0 auto; top: 5px; left: 0px; width: 607px; height: 367px; overflow: hidden; visibility: hidden; background-color: #1874cd;"> 
     <!-- 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('March 2016/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: 5px; left: 50px; width: 507px; height: 267px; overflow: hidden;"> 
      <div style="display: none;"> 
       <img data-u="image" src="March 2016/img/01.png" /> 
       <img data-u="thumb" src="March 2016/img/thumb-01.jpg" /> 
      </div> 
      <div style="display: none;"> 
       <img data-u="image" src="March 2016/img/02.png" /> 
       <img data-u="thumb" src="March 2016/img/thumb-02.jpg" /> 
      </div> 
      <div style="display: none;"> 
       <img data-u="image" src="March 2016/img/03.png" /> 
       <img data-u="thumb" src="March 2016/img/thumb-03.jpg" /> 
      </div> 
      <div style="display: none;"> 
       <img data-u="image" src="March 2016/img/04.png" /> 
       <img data-u="thumb" src="March 2016/img/thumb-04.jpg" /> 
      </div> 
      <div style="display: none;"> 
       <img data-u="image" src="March 2016/img/05.png" /> 
       <img data-u="thumb" src="March 2016/img/thumb-05.jpg" /> 
      </div> 
      <div style="display: none;"> 
       <img data-u="image" src="March 2016/img/06.png" /> 
       <img data-u="thumb" src="March 2016/img/thumb-06.jpg" /> 
      </div> 
      <div style="display: none;"> 
       <img data-u="image" src="March 2016/img/07.png" /> 
       <img data-u="thumb" src="March 2016/img/thumb-07.jpg" /> 
      </div> 
      <div style="display: none;"> 
       <img data-u="image" src="March 2016/img/08.png" /> 
       <img data-u="thumb" src="March 2016/img/thumb-08.jpg" /> 
      </div> 


     </div> 
     <!-- Thumbnail Navigator --> 
     <div data-u="thumbnavigator" class="jssort01" style="position:absolute;left:0px;bottom:0px;width:550px;height:100px;" data-autocenter="1"> 
      <!-- 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:100px;left:1px;width:40px;height:40px;"></span> 
     <span data-u="arrowright" class="jssora05r" style="top:100px;right:1px;width:40px;height:40px;"></span> 
     <!-- <a href="http://www.jssor.com" style="display:none">Jssor Slider</a> --> 
    </div> 
    <script> 
     jssor_1_slider_init(); 
    </script> 
</body> 
</html> 
+0

Ich habe nicht genug Informationen, um zu wissen, ob dies Ihr Problem behebt, aber die Inhaltsverknüpfungseigenschaft eines CEWP sollte der Pfad zu einer Datei sein, die ein HTML ** -Fragment ** enthält, nicht eine ganze HTML-Seite Dieses Fragment wird in Ihre Seite eingefügt. Wenn Sie versuchen, eine HTML-Seite einzubetten, sollten Sie einen Page Viewer-Webpart oder einen Iframe verwenden. – Thriggle

Antwort

0

Ich bin eine API tatsächlich bauen, die Jssor mit Sharepoint 2010 und 2013 integriert es in der Lage sein, Ajax Anrufe zu handhaben und dynamisch den DOM baut aus, und macht es leichter um Eigenschaften für das Widget festzulegen. Ich habe auch ein paar Pläne, aber ich möchte sie noch nicht verraten. ;)

Sie können so viele Schieberegler auf der Seite haben, wie Sie möchten. Jede ID muss sowohl in JavaScript als auch in HTML eindeutig sein.

Fügen Sie diese nach rechts CEWP:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title></title> 
 
</head> 
 
<body style="padding:0px; margin:0px; background-color:#fff;"> 
 

 
    <!-- The following codes demostrate jssor slider work independently without any other javascript library. --> 
 

 
    <script type="text/javascript" src="March 2016/js/jssor.slider-20.min.js"></script> 
 
    <!-- use jssor.slider-20.debug.js instead for debug --> 
 
    <script> 
 
     jssor_2_slider_init = function() { 
 

 
      var jssor_2_SlideshowTransitions = [ 
 
       {$Duration:1200,x:0.3,$During:{$Left:[0.3,0.7]},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
 
       {$Duration:1200,x:-0.3,$SlideOut:true,$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
 
       {$Duration:1200,x:-0.3,$During:{$Left:[0.3,0.7]},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
 
       {$Duration:1200,x:0.3,$SlideOut:true,$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
 
       {$Duration:1200,y:0.3,$During:{$Top:[0.3,0.7]},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
 
       {$Duration:1200,y:-0.3,$SlideOut:true,$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
 
       {$Duration:1200,y:-0.3,$During:{$Top:[0.3,0.7]},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
 
       {$Duration:1200,y:0.3,$SlideOut:true,$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
 
       {$Duration:1200,x:0.3,$Cols:2,$During:{$Left:[0.3,0.7]},$ChessMode:{$Column:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
 
       {$Duration:1200,x:0.3,$Cols:2,$SlideOut:true,$ChessMode:{$Column:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
 
       {$Duration:1200,y:0.3,$Rows:2,$During:{$Top:[0.3,0.7]},$ChessMode:{$Row:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
 
       {$Duration:1200,y:0.3,$Rows:2,$SlideOut:true,$ChessMode:{$Row:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
 
       {$Duration:1200,y:0.3,$Cols:2,$During:{$Top:[0.3,0.7]},$ChessMode:{$Column:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
 
       {$Duration:1200,y:-0.3,$Cols:2,$SlideOut:true,$ChessMode:{$Column:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
 
       {$Duration:1200,x:0.3,$Rows:2,$During:{$Left:[0.3,0.7]},$ChessMode:{$Row:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
 
       {$Duration:1200,x:-0.3,$Rows:2,$SlideOut:true,$ChessMode:{$Row:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
 
       {$Duration:1200,x:0.3,y:0.3,$Cols:2,$Rows:2,$During:{$Left:[0.3,0.7],$Top:[0.3,0.7]},$ChessMode:{$Column:3,$Row:12},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
 
       {$Duration:1200,x:0.3,y:0.3,$Cols:2,$Rows:2,$During:{$Left:[0.3,0.7],$Top:[0.3,0.7]},$SlideOut:true,$ChessMode:{$Column:3,$Row:12},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
 
       {$Duration:1200,$Delay:20,$Clip:3,$Assembly:260,$Easing:{$Clip:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
 
       {$Duration:1200,$Delay:20,$Clip:3,$SlideOut:true,$Assembly:260,$Easing:{$Clip:$Jease$.$OutCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
 
       {$Duration:1200,$Delay:20,$Clip:12,$Assembly:260,$Easing:{$Clip:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
 
       {$Duration:1200,$Delay:20,$Clip:12,$SlideOut:true,$Assembly:260,$Easing:{$Clip:$Jease$.$OutCubic,$Opacity:$Jease$.$Linear},$Opacity:2} 
 
      ]; 
 

 
      var jssor_2_options = { 
 
       $AutoPlay: true, 
 
       $SlideshowOptions: { 
 
       $Class: $JssorSlideshowRunner$, 
 
       $Transitions: jssor_2_SlideshowTransitions, 
 
       $TransitionsOrder: 1 
 
       }, 
 
       $ArrowNavigatorOptions: { 
 
       $Class: $JssorArrowNavigator$ 
 
       }, 
 
       $ThumbnailNavigatorOptions: { 
 
       $Class: $JssorThumbnailNavigator$, 
 
       $Cols: 8, 
 
       $SpacingX: 8, 
 
       $SpacingY: 8, 
 
       $Align: 360 
 
       } 
 
      }; 
 

 
      var jssor_2_slider = new $JssorSlider$("jssor_2", jssor_2_options); 
 

 
      //responsive code begin 
 
      //you can remove responsive code if you don't want the slider scales while window resizes 
 
      function ScaleSlider() { 
 
       var refSize = jssor_2_slider.$Elmt.parentNode.clientWidth; 
 
       if (refSize) { 
 
        refSize = Math.min(refSize, 550); 
 
        jssor_1_slider.$ScaleWidth(refSize); 
 
       } 
 
       else { 
 
        window.setTimeout(ScaleSlider, 30); 
 
       } 
 
      } 
 
      ScaleSlider(); 
 
      $Jssor$.$AddEvent(window, "load", ScaleSlider); 
 
      $Jssor$.$AddEvent(window, "resize", $Jssor$.$WindowResizeFilter(window, 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('March 2016/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 .p   (normal) 
 
     .jssort01 .p:hover  (normal mouseover) 
 
     .jssort01 .p.pav  (active) 
 
     .jssort01 .p.pdn  (mousedown) 
 
     */ 
 
     .jssort01 .p { 
 
      position: absolute; 
 
      top: 0; 
 
      left: 0; 
 
      width: 80px; 
 
      height: 80px; 
 
     } 
 

 
     .jssort01 .t { 
 
      position: absolute; 
 
      top: 0; 
 
      left: 0; 
 
      width: 100%; 
 
      height: 100%; 
 
      border: none; 
 
     } 
 

 
     .jssort01 .w { 
 
      position: absolute; 
 
      top: 0px; 
 
      left: 0px; 
 
      width: 100%; 
 
      height: 100%; 
 
     } 
 

 
     .jssort01 .c { 
 
      position: absolute; 
 
      top: 0px; 
 
      left: 0px; 
 
      width: 80px; 
 
      height: 80px; 
 
      border: #fff 2px solid; 
 
      box-sizing: content-box; 
 
      background: url('March 2016/img/t01.png') -800px -800px no-repeat; 
 
      _background: none; 
 
     } 
 

 
     .jssort01 .pav .c { 
 
      top: 10px; 
 
      _top: 0px; 
 
      left: 10px; 
 
      _left: 0px; 
 
      width: 60px; 
 
      height: 60px; 
 
      border: #000 0px solid; 
 
      _border: #fff 2px solid; 
 
      background-position: 50% 50%; 
 
     } 
 

 
     .jssort01 .p:hover .c { 
 
      top: 0px; 
 
      left: 0px; 
 
      width: 80px; 
 
      height: 80px; 
 
      border: #fff 1px solid; 
 
      background-position: 50% 50%; 
 
     } 
 

 
     .jssort01 .p.pdn .c { 
 
      background-position: 50% 50%; 
 
      width: 80px; 
 
      height: 80px; 
 
      border: #fff 2px solid; 
 
     } 
 

 
     * html .jssort01 .c, * html .jssort01 .pdn .c, * html .jssort01 .pav .c { 
 
      /* ie quirks mode adjust */ 
 
      width /**/: 80px; 
 
      height /**/: 80px; 
 
     } 
 

 
    </style> 
 

 

 
    <div id="jssor_2" style="position: relative; margin: 0 auto; top: 5px; left: 0px; width: 607px; height: 367px; overflow: hidden; visibility: hidden; background-color: #1874cd;"> 
 
     <!-- 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('March 2016/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: 5px; left: 50px; width: 507px; height: 267px; overflow: hidden;"> 
 
      <div style="display: none;"> 
 
       <img data-u="image" src="March 2016/img/01.png" /> 
 
       <img data-u="thumb" src="March 2016/img/thumb-01.jpg" /> 
 
      </div> 
 
      <div style="display: none;"> 
 
       <img data-u="image" src="March 2016/img/02.png" /> 
 
       <img data-u="thumb" src="March 2016/img/thumb-02.jpg" /> 
 
      </div> 
 
      <div style="display: none;"> 
 
       <img data-u="image" src="March 2016/img/03.png" /> 
 
       <img data-u="thumb" src="March 2016/img/thumb-03.jpg" /> 
 
      </div> 
 
      <div style="display: none;"> 
 
       <img data-u="image" src="March 2016/img/04.png" /> 
 
       <img data-u="thumb" src="March 2016/img/thumb-04.jpg" /> 
 
      </div> 
 
      <div style="display: none;"> 
 
       <img data-u="image" src="March 2016/img/05.png" /> 
 
       <img data-u="thumb" src="March 2016/img/thumb-05.jpg" /> 
 
      </div> 
 
      <div style="display: none;"> 
 
       <img data-u="image" src="March 2016/img/06.png" /> 
 
       <img data-u="thumb" src="March 2016/img/thumb-06.jpg" /> 
 
      </div> 
 
      <div style="display: none;"> 
 
       <img data-u="image" src="March 2016/img/07.png" /> 
 
       <img data-u="thumb" src="March 2016/img/thumb-07.jpg" /> 
 
      </div> 
 
      <div style="display: none;"> 
 
       <img data-u="image" src="March 2016/img/08.png" /> 
 
       <img data-u="thumb" src="March 2016/img/thumb-08.jpg" /> 
 
      </div> 
 

 

 
     </div> 
 
     <!-- Thumbnail Navigator --> 
 
     <div data-u="thumbnavigator" class="jssort01" style="position:absolute;left:0px;bottom:0px;width:550px;height:100px;" data-autocenter="1"> 
 
      <!-- 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:100px;left:1px;width:40px;height:40px;"></span> 
 
     <span data-u="arrowright" class="jssora05r" style="top:100px;right:1px;width:40px;height:40px;"></span> 
 
     <!-- <a href="http://www.jssor.com" style="display:none">Jssor Slider</a> --> 
 
    </div> 
 
    <script> 
 
     jssor_2_slider_init(); 
 
    </script> 
 
</body> 
 
</html>

Dieser Code einige Bereinigung verwenden konnte (alles, was ich war, die IDs ändern tat). Es ist am besten, die Redundanz von wiederverwendbaren Funktionen und CSS-Code zu entfernen.

Auch, mit SP2010, würde ich empfehlen, das Skript von der html & CSS zu trennen. Speichern Sie das Skript in einer .js-Datei und fügen Sie Ihrem CEWP vor dem HTML-Code ein Tag hinzu. Dadurch wird verhindert, dass SharePoint "korrigiert", was es für falsch hält.