Jquery 居中DIV显示在IE中的右侧
下面的代码在FF、CH等中运行良好，但并没有在IE中居中。它指向屏幕的右侧 知道为什么吗Jquery 居中DIV显示在IE中的右侧,jquery,html,css,jquery-ui,Jquery,Html,Css,Jquery Ui,下面的代码在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
<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>
滑动div
* {
边际：0px；
填充：0px；
字体系列：arial；
字体大小：12px；
}
#掩护{
宽度：100%；
高度：400px；
背景：#EEEEEE；
文本对齐：居中；
}
#幻灯片{
宽度：1024px；
高度：400px；
保证金：0px自动；
}
.幻灯片{
宽度：1024px；
高度：400px；
显示：无；
位置：绝对位置；
边框：1px实心#000000；
}
.幻灯片图像{
宽度：1024px；
高度：400px；
}
.首先{
显示：块；
}
$（文档）.ready（函数（）
{
var timeoutId；//用于存储超时id
var slideImage=函数（步骤）
{
如果（步骤==未定义）步骤=1；//如果未定义，则设置默认值
clearTimeout（timeoutId）；//清除超时（如果有）
var indx=$（'.slide:visible'）.index（'.slide'）；//获取当前图像的索引
if（step！=0）//如果step==0，我们不需要在淡出中进行任何淡出
{
$（'.slide:visible'）.fadeOut（）；//淡出此幻灯片
}
indx=indx+step；//下一张幻灯片的增量
if（indx>=$（'.slide'）.length）//检查下一张幻灯片的边界
{
indx=0；
}
else if（indx<0）
{
indx=$（'.slide'）。长度-1；
}
if（step！=0）//如果step==0，我们不需要在淡出中进行任何淡出
{
$（'.slide:eq（'+indx+'））.fadeIn（）；//fadeIn下一张幻灯片
}
timeoutId=setTimeout（slideImage，2000）；//设置Itmeout
};
slideImage（0）；//开始滑动
$（'#prev'）。单击（函数（）//当单击prev时
{
slideImage（-1）；//步骤为-1的slideImage
});
$（“#下一步”）。单击下一步时，单击（函数（）//
{
slideImage（1）；//步骤为1的slideImage
});
$（“#停止”）。单击（函数（）//当单击“暂停”时
{
clearTimeout（timeoutId）；//清除超时
$（this）.hide（）；//隐藏暂停并显示播放
$（'#play'）.show（）；
});
$（“#播放”）。单击播放时，单击（函数（）//按钮
{
幻灯片图像（0）；//开始幻灯片图像
$（this）.hide（）；//隐藏播放并显示暂停
$（“#停止”）.show（）；
});
});
1.
2.
3.
4.
.slide {
left:0px;
}
添加此项，以便为
.slides#slides {
position: relative;
}
试试这段代码。我想这和@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>
滑动div
* {
边际：0px；
填充：0px；
字体系列：arial；
字体大小：12px；
}
#封面{
宽度：100%；
高度：400px；
背景：#EEEEEE；
文本对齐：居中；
位置：绝对位置
}
#幻灯片{
宽度：1024px；
高度：400px；
保证金：0px自动；
}
.幻灯片{
宽度：1024px；
高度：400px；
显示：无；
位置：相对位置；
边框：1px实心#000000；
}
.幻灯片img{
宽度：1024px；
高度：400px；
}
.第一{
显示：块；
}
$（文档）.ready（函数（）
{
var-timeoutId；
<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>