我不明白这麻烦的原因。我用的是图像滑块,除了IE8,一切都很好。
网址:link.
<div id="slides">
<div class="slides_container">
<?php
foreach($images as $image)
echo "<a href='#'><img style='margin: 0 auto; z-index: 9999;' src='{$image}' /></a>";
?>
</div>
<a href="#" class="prev"><img src="images/prev.png" width="45" height="52" alt="Arrow Prev"></a>
<a href="#" class="next"><img src="images/next.png" width="45" height="52" alt="Arrow Next"></a>
</div>
#slides {
position:absolute;
top:15px;
left:4px;
z-index:100;
}
.slides_container {
margin-top: 30px;
width:765px;
height: 350px;
overflow:hidden;
position:relative;
display:none;
}
.slides_container a {
width:765px;
height:350px;
display:block;
}
.slides_container a img {
display:block;
}
所以,在Chrome, Firefox等中,我在滑块中看到图像,但在IE8中我看不到任何图像。你能帮我找出毛病所在吗?
注。我无法在IE8下检查,因为我用的是Linux。
在"slides_container"div内生成的HTML代码如下:
<div class="slides_container">
<a href='#'>
<img style='margin: 0 auto; z-index: 9999;' src='images/gallery/home/pic29.jpg'></img>
</a>
</div>
可以看到,图像标记没有正确呈现。它应该没有结束符
</img>
标记。
一旦这个问题被修复,它将在Internet Explorer中工作。
首先,我的建议,因为我通常运行这个,是创建脚本使用<li>
浮动到左边。
$(".next").click(function()
{
var current = $(".active"),
next = current.next(".inactive");
if(next.length > 0) { // there exists a next element
current.add(next)
.toggleClass("active inactive")
offset_v = offset_v - 765;
$("#slides_container ul").animate({left: offset_v}, 500);
}
});
在php中,将第一个元素设置为。active,其他元素设置为。inactive,就是这样。
冲洗并重复上一张图片