2012-04-12 104 views
1

我正在创建照片库幻灯片并使用本网站的代码:http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.htmljquery slideViewer无法正确显示

我已经编写了代码,因为它已经写好了,我得到了幻灯片工作,但它不能正常工作。第一张图像显示正确,但每张后续图像都没有正确排列,最后一张图像根本没有显示。无论我有多少图像,最后一张图像的问题都会发生。如果我只显示4张图像,则图像#4不显示。如果我显示8张图像,则图像#8不显示。

你可以在这里查看我的幻灯片:http://jvidell.com/harlowlake.html

为什么它不是第一个图像后排队正确和不显示最后一个图像的任何想法或意见?

下面是图片的HTML:

<div id="galleryMargin"> 
<div id="gallery" class="svw" style="width: 750px; height: 498px;"> 
<ul> 
<li><img src="img/harlowLake/HL001a.jpg" /></li> 
<li><img src="img/harlowLake/HL002a.jpg" /></li> 
<li><img src="img/harlowLake/HL003a.jpg" /></li> 
<li><img src="img/harlowLake/HL004a.jpg" /></li> 
</ul> 
</div> 
</div> 

这里是脚本:

<script type="text/javascript"> 
$(window).bind("load", function() { 
$("div#gallery").slideView() 
}); 
</script> 

回答

1

问题是你已经设置边框你的幻灯片图像,这使得整个图像的宽度大于容器宽度。所以只要删除边框,然后你应该看到最后一张图片。

img { 
/*border: 1px solid black;*/ /*Remove this line*/ 
display: inline; 
} 
+0

非常感谢!我忘记了我早先在CSS中为图像设置了边框。我删除了它,解决了这个问题。 – Mock26 2012-04-12 03:41:09