0

Javascript と CSS を使用して、単純なカルーセルのようなアイコンのリストを作成しようとしています。しかし、それは私のやり方ではうまくいかないようです。誰でも助けることができますか？これは私のコードです

 JS
    var container = document.getElementById('container');
    var foo = [];
    for (var i = 0; i < 5; i++) {
        foo[i] = document.createElement('div');
        foo[i].id = 'SingleElement';
        foo[i].innerHTML = '<img alt="" src="http://www.placehold.it/300x200"/>';
        container.appendChild(foo[i]);
    }

    HTML
    <div id="container"></div>

    and CSS
    #container {
       overflow-x:scroll;
       white-space: nowrap;
       float:left;
    }
    #SingleElement {
        float:left;
        white-space: nowrap;
    }
    img {
        display:inline-block;
    }

とフィドルの例。ありがとうございました。

4

2 に答える 2

0

これは実際にはカルーセルではなく、既存のライブラリの 1 つに注意する必要があるという他のコメント投稿者に同意します。5 つの画像を含むスクロール可能な div を表示したいだけの場合は、次をご覧ください。

http://jsfiddle.net/nrybQ/

#container {
   overflow-x:scroll;
   white-space: nowrap;
   float:left;
    width:100%;
}

var container = document.getElementById('container');
var foo = [];
for (var i = 0; i < 5; i++) {
     foo[i] = document.createElement('span');
     foo[i].innerHTML = '<img alt="" src="http://www.placehold.it/300x200"/>';
      container.appendChild(foo[i]);
}

いくつかのヒント: - 複数の要素に ID を使用しないでください - div ではなくスパンを使用してください - コンテナーの幅を指定してください

于 2013-10-21T14:11:00.290 に答える