2

jqueryカルーセルにいくつかのInstagram写真を表示しようとしていますが、何らかの理由で写真が逆の順序で表示され、すべての写真がカルーセルスライダーに表示されません。

私が使用しているJavaScriptは次のとおりです。

function(data) {
    for (i=0; i<20; i++){
        $("#carousel").prepend("<li><a target='_blank' href='" + data.data[i].link + "'><img src '" + data.data[i].images.thumbnail.url + "'></img></a>");
    } 
}

HTML：

<ul id ="carousel" class="elasticslide-list">
<li></li>
</ul>
4

2 に答える 2

3

Prepend は何かを反転します。

a prepend b prepend c などについて考えてみましょう:

a -> ba -> cba -> dcba -> ...

append代わりに使用してください。

欠落している画像については、ハードコードされた 20 枚以上あると思います。

試す：

for (i = 0; i < data.data.length; ++i)

また、iはどこかで宣言する必要があります。うまくいけば、より高いスコープで宣言され、暗黙のグローバルではありません。

少しやり過ぎですが、必要に応じて、jQuery を使用することもできますeach。

$.each(data.data, function() {
    //"this" is now each of the data.data entries.
    //like this.images or this.link
});

編集:タグのsrc属性に= が欠落しているようにも見えます。img

ファイル名の中に引用符があると適切にエスケープされない可能性があるため、 with DOM 操作を設定したくなるかもしれませんsrc(おそらく起こらないでしょう)。

于 2012-12-27T21:14:34.610 に答える
0

layerJSとvue.jsを使用して、このアプローチを試すことができます ( jsbin の例を参照) 。これには API キーが必要ないため、フリッカーの画像を使用しました。

ジェスチャーの動きも同様に機能し、それらの間でさまざまな種類の遷移を行うことができます。

基本的に、ステージdiv を追加してレイヤーを配置し、画像の間に必要な数のフレームを追加します。

HTML は次のようになります。

<div data-lj-type="stage">
    <div data-lj-type="layer" data-lj-default-frame="image1">
        <div data-lj-type="frame" data-lj-name="image1" data-lj-neighbors.b="image2" class="frame">
            <image src="img/1.jpg" />
        </div>
        <div data-lj-type="frame" data-lj-name="image2" data-lj-neighbors.b="image3" class="frame">
            <image src="img/2.jpg" />
        </div>
    </div>
</div>

これが将来あなたや他の人に役立つことを願っています。

免責事項: ここで使用した layerJS オープン ソース ライブラリに取り組んでいます。

于 2017-03-16T13:20:23.097 に答える