【问题标题】:JSSOR carousel slider not working in IEJSSOR 轮播滑块在 IE 中不起作用
【发布时间】:2015-03-24 12:50:34
【问题描述】:

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;').");

用于创建幻灯片的代码 sn-p:

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

【问题讨论】:

    标签: javascript html internet-explorer slider jssor


    【解决方案1】:

    请更换

    divSlides.setAttribute("style",slidestyle);
    

    divSlides.style.cssText = slidestyle;
    

    如果还有问题,请在此处发布生成的html代码。

    【讨论】:

    • 我已经按照建议替换了代码,现在对幻灯片进行了验证,但 BulletNavigator (jssor.slider.js:3325) 和 ArrowNavigator (jssor.slider.js:3363) 也出现了同样的问题。在用这个建议的代码替换导航器样式后,滑块呈现没有任何错误,但导航器不可见。导航器在样式定义中使用Display:none 生成。生成的html代码已经贴在这里了。
    • 我看了一下代码,不是你生成的原始代码。
    • 我的意思是你动态生成(创建)的代码。
    • 我已经发布了生成的 html 内容和指定用于初始化滑块的选项。
    • 我注意到“幻灯片”容器的宽度和高度未指定。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-24
    • 2016-11-27
    • 1970-01-01
    相关资源
    最近更新 更多