【发布时间】：2012-05-02 04:31:47
【问题描述】：
我正在使用 Cycle 插件构建一个站点，并使用缩略图作为寻呼机。它在 Firefox、Chrome 和 IE9 中运行良好。在 IE8 和 7 中，虽然我有一个非常奇怪的问题。
寻呼机的第一张图片和幻灯片可以正常加载。当我单击第二个缩略图以加载第二个图像时，幻灯片变为白色（看起来好像它没有加载图像或尝试加载无法完全确定的图像），当我单击第三个缩略图时加载幻灯片中的第二张图像。这种不加载图像然后加载错误图像的模式在整个幻灯片中继续存在。
这是实际的 jQuery：
$(document).ready(function() {
$('#gallery').cycle({
fx: 'scrollHorz',
speed: 500,
timeout: 0,
pager: '#slide_navigation',
pagerAnchorBuilder: function(idx, slide) {
return '#slide_navigation li:eq(' + idx + ') a';
}
});
$("#left").click(function() {
$("#slide_navigation").animate({"marginLeft": "+=960px"}, "slow");
$("#left").hide();
$("#right").show();
});
$("#right").click(function() {
$("#slide_navigation").animate({"marginLeft": "-=960px"}, "slow");
$("#right").hide();
$("#left").show();
});
这是页面的 CSS：
#slide_navigation {
width: 2000px;
padding: 10px 0;
border: 1px #909090;
border-style: solid none;
}
#slide_navigation li {
list-style: none;
display: inline;
margin: 5px;
padding: 52px 3px 0px 3px;
}
#slide_navigation li:first-child {
margin-left: 25px;
}
#slide_navigation li.activeSlide {
background: #F68009;
}
#left {
width: 20px;
height: 75px;
float: left;
background: #FFFFFF url(prev1.png) no-repeat center;
position: relative;
top: -85px;
left: -3px;
margin-bottom: -85px;
display: none;
}
#right {
width: 20px;
height: 75px;
float: right;
background: #FFFFFF url(next1.png) no-repeat center;
position: relative;
top: -85px;
right: -3px;
margin-bottom: -85px;
}
以防万一 - 他是寻呼机的 HTML：
<div id="slide_navigation">
<li><a href="#"><img src=support-1.jpg></a></li>
<li><a href="#"><img src=support-2.jpg></a></li>
<li><a href="#"><img src=support-3.jpg></a></li>
<li><a href="#"><img src=support-4.jpg></a></li>
<li><a href="#"><img src=support-5.jpg></a></li>
<li><a href="#"><img src=support-6.jpg></a></li>
<li><a href="#"><img src=support-7.jpg></a></li>
<li><a href="#"><img src=support-8.jpg></a></li>
<li><a href="#"><img src=support-9.jpg></a></li>
<li><a href="#"><img src=support-10.jpg></a></li>
<li><a href="#"><img src=support-11.jpg></a></li>
<li><a href="#"><img src=support-12.jpg></a></li>
<li><a href="#"><img src=support-13.jpg></a></li>
<li><a href="#"><img src=support-14.jpg></a></li>
<li><a href="#"><img src=support-15.jpg></a></li>
<li><a href="#"><img src=support-16.jpg></a></li>
</div>
<div id="left" class="cursorPointer"></div>
<div id="right" class="cursorPointer"></div>
左右 id 用于帮助导航滑块。不要认为它是相关的，但会提供尽可能多的信息。任何帮助将不胜感激。
谢谢！
【问题讨论】：
-
您能为我们在jsbin.com 上设置一个工作示例吗？
-
以前从未在 jsbin 做过什么，但我想我已经成功了。 jsbin.com/ukizac
-
这是获得更快答案的好工具。我在下面提供了一个解决方案。
标签： internet-explorer jquery-plugins jquery-cycle