Question

我正在使用jquery photo cycle工具在website上显示公司徽标列表。我从数据库中随机选择5个远程图像网址显示在每个页面上，并将该元素置于页面中心。

<div align="center">
Featured Companies
<div class="logos" align="center"> 
<?php 
foreach($this->logos as $logo) :
echo "<a title=\"".$logo->name."\" href=\"./company/listrunners/company/".$logo->id."\"><img src=\"".$logo->image."\"/></a>\n";
endforeach;
?>
</div> 
</div>

徽标div的CSS

.logo {  
    padding: 0;  
    margin:  0;  
} 

.logo img {  
    position: inherit;
    padding: 15px;  
    border: 1px solid #ccc;  
    background-color: #eee;
    top: 0;
    left: 0;
    max-width: 200px; 
}

问题是由于公司徽标的尺寸不同，照片周期窗口小部件的对齐方式可能会根据随机选择而改变，显示在中间或左侧。如果不知道将要显示的图像的大小，是否有办法确保所有徽标都显示在中心？

Answer 1

我不完全确定你会怎么做，但我确信这是可能的。您将无法使用CSS来执行此操作，因为jquery在线应用样式以便覆盖样式表

我可以看到插件正在将{position：'absolute'，top：0，left：0}应用于图像元素。

Malsup还提供插件下载中的源代码，并且在那里他设置了元素的位置;

$slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) {
        var z = first ? i >= first ? els.length - (i-first) : first-i : els.length-i;
        $(this).css('z-index', z)
    });

但这对所有元素都很复杂，所以我仍然不能完全确定如何解决每个图像更改位置的问题。

有回调函数之前/之后，您可以使用它来覆盖元素的位置，但也许更好的选项是calculateTimeout回调函数，它允许您设置单个幻灯片/图像的超时。

function calculateTimeout(currElement, nextElement, opts, isForward) {}

这不是你的重要部分。它还为您提供当前/下一个元素，并且您可以在那里定位元素的位置。

这不是你问题的真正答案，但希望有一些想法可以帮助你。

Answer 2

我从malsup

上的centering images获得此链接

我删除了div

上的align ='center'标记

<div class="slideshow"> 
<?php 
foreach($this->logos as $logo) :
echo "<div class=\"slide\"><a title=\"".$logo->name."\" href=\"./company/listrunners/company/".$logo->id."\"><img src=\"".$logo->image."\"/></a></div>\n";
endforeach;
?>
</div>

然后将我的CSS更新为

.slideshow { margin: 20px auto; padding: 0; }
.slide { margin: 0; padding: 0 }
.slideshow, .slide { height: 332px; width: 832px; }
.slide img { padding: 10px; border: 1px solid #ccc; background-color: #eee; margin: auto; display: block }

Jquery Photo Cycle - 确保远程图像URL正确居中

2 个答案: