2

我已经查看了相关的问题（和答案），所以我试图在网站上保留一份副本。

这是问题所在；我正在做一个小图像滑块，它使用 php 首先获取目录中的所有图像，然后吐出其中的 7 个：

<div id="imageScroller">
<div id="wide">
<?php
    $images = scandir("folder/folder/folder");
    for($i = 2; $i < 10; $i++){
        echo "<img src='folder/folder/folder/" . $images[$i] . "' name='" . $i . "' class='imgScroll'>";
    }
?>
</div>
</div>

然后它将$images数组和计数器传递$i给 Javascript：

var images = new Array();
images = <?php echo json_encode($images); ?>;
var i = <?php echo json_encode($i); ?>;

setInterval对于重复函数并将图像动画到左侧，附加一个新图像并在每次传递时删除第一个图像：

setInterval("newImg()", 3000);
function newImg(){
    if(i == images.length){
        i = 2; //The PHP array returns the first two folders as [0] => ., [1] => ..
    }
    $("#wide").children().first().animate({'marginLeft': '-93px'}, 3000, function(){
    $("#wide").append("<img src='folder/folder/folder/" + images[i] + "' name='" + i + "' class='imgScroll'>\n").children().first().remove();
    i++;
    });
}

还有一些 CSS 来总结摘录：

        #imageScroller{
            width: 100%;
            height: 114px;
            width: 651px;
            overflow: hidden;
            border: 1px solid gray;
            padding: 0;
        }
        #wide{
            width: 837px;
        }
        .imgScroll{
            padding-left: 5px;
            padding-right: 5px;
            height: 114px;
            width: 83px;
            margin: 0;
            border: 0;
        }

所以我的问题是，由于我img在不同时间创建元素，我如何摆脱不同行上的图像之间的间距？或者，简单地，附加图像，以便根据浏览器它们都在同一行？

4

2 回答 2

1

尝试将 line-height 和 font-size 设置为 0：

#wide {
    width: 837px;
    line-height: 0;
    font-size: 0;
}

这是处理内联元素时最简单的技巧。

于 2013-03-02T07:24:12.250 回答
0

尝试去：

.imgScroll { display: inline-block; }
于 2013-03-02T07:26:28.947 回答