JSSOR转盘滑块在IE中不工作

JSSOR carousel slider not working in IE

本文关键字:IE 工作 JSSOR      更新时间:2023-09-26

var BulletNavOptions = { $Class: SliderOpt.BulletNavigatorOptions.Class, $ChanceToShow: 1, $AutoCenter: 1, $Steps: 1, $Lanes: 3, $SpacingX: 10, $SpacingY: 5, $Orientation: 1 };
		
var ArrowNavOptions = { $Class: SliderOpt.ArrowNavigatorOptions.Class, $ChanceToShow: 1, $AutoCenter: 0, $Steps: 1 };
		
var options = { $AutoPlay: true, $AutoPlaySteps: 1, $AutoPlayInterval: 3000, $FillMode:0, $DisplayPieces: 3, $SlideWidth: 400, $SlideHeight: 300, $ArrowKeyNavigation: true, $SlideDuration: 200, $MinDragOffsetToSlide: 0, $SlideSpacing: 10, $ParkingPosition: 0, $PauseOnHover: 3, $PlayOrientation: 1, $DragOrientation: 1, $StartIndex: 0, $Loop: 1, $LazyLoading: 1, $BulletNavigatorOptions: BulletNavOptions, $ArrowNavigatorOptions: ArrowNavOptions};
var jssor_slider1 = new $JssorSlider$(_container, options);
<DIV id=span_mlgrid class=x-form-con-grid style="OVERFLOW: hidden; HEIGHT: 300px; WIDTH: 1210px; POSITION: relative" jssor-slider="true">
<DIV style="OVERFLOW: hidden; HEIGHT: 300px; WIDTH: 1210px; POSITION: absolute; LEFT: 0px; TOP: 0px" u="slides">
<DIV><IMG src="../Resources/chrysalis/images/PlfControlLibrary/Default/001.jpg" width=720 height=480 u="image"></DIV>
<DIV><IMG src="../Resources/chrysalis/images/PlfControlLibrary/Default/002.jpg" width=720 height=480 u="image"></DIV>
<DIV><IMG src="../Resources/chrysalis/images/PlfControlLibrary/Default/003.jpg" width=720 height=480 u="image"></DIV>
<DIV><IMG src="../Resources/chrysalis/images/PlfControlLibrary/Default/004.jpg" width=720 height=480 u="image"></DIV></DIV>
<STYLE type=text/css>.jssorb03 DIV {
	OVERFLOW: hidden; CURSOR: pointer; BACKGROUND: url(../Resources/chrysalis/images/PlfControlLibrary/b05.png) no-repeat
}
.jssorb03 DIV:hover {
	OVERFLOW: hidden; CURSOR: pointer; BACKGROUND: url(../Resources/chrysalis/images/PlfControlLibrary/b05.png) no-repeat
}
.jssorb03 .av {
	OVERFLOW: hidden; CURSOR: pointer; BACKGROUND: url(../Resources/chrysalis/images/PlfControlLibrary/b05.png) no-repeat
}
.jssorb03 DIV {
	BACKGROUND-POSITION: -5px -4px
}
.jssorb03 DIV:hover {
	BACKGROUND-POSITION: -35px -4px
}
.jssorb03 .av:hover {
	BACKGROUND-POSITION: -35px -4px
}
.jssorb03 .av {
	BACKGROUND-POSITION: -65px -4px
}
.jssorb03 .dn {
	BACKGROUND-POSITION: -95px -4px
}
.jssorb03 .dn:hover {
	BACKGROUND-POSITION: -95px -4px
}
</STYLE>
<DIV style="RIGHT: 6px; POSITION: absolute; BOTTOM: 15px" u="navigator" class="jssorb03">
<DIV style="FONT-SIZE: 12px; HEIGHT: 21px; WIDTH: 21px; POSITION: absolute; COLOR: white; TEXT-ALIGN: center; LINE-HEIGHT: 21px" u="prototype"></DIV></DIV>
<STYLE type=text/css>.jssora03l {
	OVERFLOW: hidden; CURSOR: pointer; BACKGROUND: url(../Resources/chrysalis/images/PlfControlLibrary/a03.png) no-repeat; POSITION: absolute; DISPLAY: block
}
.jssora03r {
	OVERFLOW: hidden; CURSOR: pointer; BACKGROUND: url(../Resources/chrysalis/images/PlfControlLibrary/a03.png) no-repeat; POSITION: absolute; DISPLAY: block
}
.jssora03ldn {
	OVERFLOW: hidden; CURSOR: pointer; BACKGROUND: url(../Resources/chrysalis/images/PlfControlLibrary/a03.png) no-repeat; POSITION: absolute; DISPLAY: block
}
.jssora03rdn {
	OVERFLOW: hidden; CURSOR: pointer; BACKGROUND: url(../Resources/chrysalis/images/PlfControlLibrary/a03.png) no-repeat; POSITION: absolute; DISPLAY: block
}
.jssora03l {
	BACKGROUND-POSITION: -3px -33px
}
.jssora03r {
	BACKGROUND-POSITION: -63px -33px
}
.jssora03l:hover {
	BACKGROUND-POSITION: -123px -33px
}
.jssora03r:hover {
	BACKGROUND-POSITION: -183px -33px
}
.jssora03ldn {
	BACKGROUND-POSITION: -243px -33px
}
.jssora03rdn {
	BACKGROUND-POSITION: -303px -33px
}
</STYLE>
<SPAN style="HEIGHT: 55px; WIDTH: 55px; POSITION: absolute; LEFT: 8px; TOP: 40%" u="arrowleft" class="jssora03l"></SPAN><SPAN style="HEIGHT: 55px; WIDTH: 55px; RIGHT: 8px; POSITION: absolute; TOP: 40%" u="arrowright" class="jssora03r"></SPAN></DIV>

我已经动态创建了jssor旋转木马滑块,它在chrome和firefox中工作得很好,但在IE中则不然

对于溢出的幻灯片容器,以下条件:指定了隐藏,仅在IE中失败,***jssor.slider.js:2812*** if (slidesContainerOverflow != "hidden" && (slidesContainerOverflowX != "hidden" || slidesContainerOverflowY != "hidden")) $JssorDebug$.$Fail("Overflow of slides container wrong specification, it should be specified as 'hidden' (style='overflow:hidden;').");

创建幻灯片的代码片段:

divSlides = document.createElement("div");        
            divSlides.setAttribute("u","slides");
            var slidestyle = "position: absolute; overflow: hidden; left: 0px; top: 0px;";      
            divSlides.setAttribute("style",slidestyle);

请更换

divSlides.setAttribute("style",slidestyle);

带有

divSlides.style.cssText = slidestyle;

如果仍然有问题,请在这里发布生成的html代码。