jssor滑块+ sharepoint 2010
jssor滑块+ sharepoint 2010
提问于 2016-05-27 00:38:14
我正尝试在SharePoint2010中使用两个jssor滑块。
我在sharepoint 2010中创建了2个CEWP部件，并使用CEWP引用html。左边的网页部件应该使用一个不同的主题和图片的jssor滑块。右边的网页部件应该使用不同的主题和图片的另一个jssor滑块。
我试过了，但当我们发布页面时，只有一个会出现。不是两个都有？
左侧HTML代码：
<!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>回答 1
Stack Overflow用户
发布于 2016-08-12 23:36:24
实际上，我正在构建一个将Jssor与SharePoint 2010和2013集成在一起的应用程序接口。它将能够处理Ajax调用并动态构建DOM，并使为小部件设置属性变得更容易。我也有几个计划，但现在还不想放弃。;)
您可以在页面上有任意数量的滑块。每个ID在JavaScript和HTML中都必须是唯一的。
将此代码添加到正确的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>
这段代码可能需要一些清理(我所做的只是更改了ID)。最好去掉可重用函数和css代码的冗余。
此外，对于SP2010，我建议将脚本与html & css分开。将脚本保存到.js文件中，并将标记添加到CEWP的html之前。这将阻止SharePoint“纠正”它认为是错误的东西。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37466586
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号