以下代码在FF，CH等中工作正常，但不会在IE中居中。它走向屏幕的右侧。
知道为什么吗？
<html>
<head>
<title>Sliding DIVs</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style>
* {
margin:0px;
padding:0px;
font-family:arial;
font-size:12px;
}
#cover {
width:100%;
height:400px;
background:#EEEEEE;
text-align:center;
}
#slides {
width:1024px;
height:400px;
margin:0px auto;
}
.slide {
width:1024px;
height:400px;
display:none;
position:absolute;
border:1px solid #000000;
}
.slide img {
width:1024px;
height:400px;
}
.first {
display:block;
}
</style>
<script type="text/javascript">
$(document).ready(function()
{
var timeoutId; //To store timeout id
var slideImage = function(step)
{
if (step == undefined) step = 1; //If undefined then set default value
clearTimeout(timeoutId); //Clear timeout if any
var indx = $('.slide:visible').index('.slide'); //Get current image's index
if (step != 0) //If step == 0, we don't need to do any fadein our fadeout
{
$('.slide:visible').fadeOut(); //Fadeout this slide
}
indx = indx + step; //Increment for next slide
if (indx >= $('.slide').length) //Check bounds for next slide
{
indx = 0;
}
else if (indx < 0)
{
indx = $('.slide').length - 1;
}
if (step != 0) //If step == 0, we don't need to do any fadein our fadeout
{
$('.slide:eq(' + indx + ')').fadeIn(); //Fadein next slide
}
timeoutId = setTimeout(slideImage, 2000); //Set Itmeout
};
slideImage(0); //Start sliding
$('#prev').click(function() //When clicked on prev
{
slideImage(-1); //SlideImage with step = -1
});
$('#next').click(function() //When clicked on next
{
slideImage(1); //SlideImage with step = 1
});
$('#stop').click(function() //When clicked on Pause
{
clearTimeout(timeoutId); //Clear timeout
$(this).hide(); //Hide Pause and show Play
$('#play').show();
});
$('#play').click(function() //When clicked on Play
{
slideImage(0); //Start slide image
$(this).hide(); //Hide Play and show Pause
$('#stop').show();
});
});
</script>
</head>
<body>
<div id="cover">
<div id="slides">
<div class="slide first">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：1)
幻灯片类具有绝对位置，并将其移动到容器外部。
添加：
#slides {
position:relative;
}
（已经建议）然后：
.slide {
left:0px;
}
答案 1 :(得分：1)
答案 2 :(得分：0)
试试这段代码。我认为与@xivo说的大致相同。在IE浏览器中工作，但幻灯片在转换过程中会略微跳转。
<html>
<head>
<title>Sliding DIVs</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style>
* {
margin:0px;
padding:0px;
font-family:arial;
font-size:12px;
}
#cover {
width:100%;
height:400px;
background:#EEEEEE;
text-align:center;
position:absolute
}
#slides {
width:1024px;
height:400px;
margin:0px auto;
}
.slide {
width:1024px;
height:400px;
display:none;
position:relative;
border:1px solid #000000;
}
.slide img {
width:1024px;
height:400px;
}
.first {
display:block;
}
</style>
<script type="text/javascript">
$(document).ready(function()
{
var timeoutId; //To store timeout id
var slideImage = function(step)
{
if (step == undefined) step = 1; //If undefined then set default value
clearTimeout(timeoutId); //Clear timeout if any
var indx = $('.slide:visible').index('.slide'); //Get current image's index
if (step != 0) //If step == 0, we don't need to do any fadein our fadeout
{
$('.slide:visible').fadeOut(); //Fadeout this slide
}
indx = indx + step; //Increment for next slide
if (indx >= $('.slide').length) //Check bounds for next slide
{
indx = 0;
}
else if (indx < 0)
{
indx = $('.slide').length - 1;
}
if (step != 0) //If step == 0, we don't need to do any fadein our fadeout
{
$('.slide:eq(' + indx + ')').fadeIn(); //Fadein next slide
}
timeoutId = setTimeout(slideImage, 2000); //Set Itmeout
};
slideImage(0); //Start sliding
$('#prev').click(function() //When clicked on prev
{
slideImage(-1); //SlideImage with step = -1
});
$('#next').click(function() //When clicked on next
{
slideImage(1); //SlideImage with step = 1
});
$('#stop').click(function() //When clicked on Pause
{
clearTimeout(timeoutId); //Clear timeout
$(this).hide(); //Hide Pause and show Play
$('#play').show();
});
$('#play').click(function() //When clicked on Play
{
slideImage(0); //Start slide image
$(this).hide(); //Hide Play and show Pause
$('#stop').show();
});
});
</script>
</head>
<body>
<div id="cover">
<div id="slides">
<div class="slide first">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
</div>
</div>
</body>
</html>