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

行の高さとフォントのサイズを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 に答える