Javascriptで継ぎ目のないループイメージを作成する

Question

私の上司がこれをやっているので、Javascriptでどうやってやるのか分かりません。

私がする必要があるのは、htmlページに3枚の写真があり、ページを上にスクロールさせることです。

ユーザーが[次へ]をクリックすると、3つの画像がスクロールして消えて（STUFFの下に消えます）、さらに3つの画像に置き換えられます。これらの画像を直接クリックすると、テキストボックスの内容が変更されます（この場合、REPLACE MEと表示されます）。私はMEの操作を理解しています。しかし、私はイメージをスクロールして別のものに置き換える方法をよく分かりません。（イメージループは5回次のプレスの後でループします）Jqueryは簡単にしますが、チュートリアルのほとんどは私が探しているものではありませんために。誰もがこのようなものをカバーするチュートリアルを知っていますか？

A asset http://www.loopmedia.com/images/newsletter/SlideUpAndSlideUpV2.png

Answer 1

私はあなたが基本的に働いていたthisまたはthis

Answer 2

私はあなたが必要とするすべてが検索され、それを行うことができますそこにプラグインがあると確信しています。

あなたがそれを自分でしたいのであれば、それは私がやる方法です。

スプライトの最初と最後のイメージが同じ（オーバーラップする）場合は、スプライトのtopプロパティに一定の値（最後のイメージがスクロールしている）に達するまで不確定にアニメートし、戻り、topの値をリセットして、もう一度進みます。

Answer 3

オクラホマので、あなたがその背後にある理論をしたい場合は、これはそれがある...サンセリフコード：あなたは、コンテナであるdiv要素を持っている必要が

。これは、画像の「ビューポート」が必要な幅と高さです。これはoverflow: hidden; position: relative;である必要があります。

この中には、画像のビューポート（前述のように）と同じ幅で、すべてのコンテンツと同じくらい広いdivが必要です。これは、スクロール側の5つの画像すべての高さです。これはposition: absolute; top: 0; left: 0;である必要があります。

この内部divの内部には、画像を含む5つのdivをそれぞれの上に配置する必要があります。あなたがクリックしたときに

そう...今、「次へ」あなたは-HEIGHT_OF_1_SET_OF_IMAGESするanimate()（jqueryの）インナーのdivのtop値にする必要があります。これは、写真がページからスクロールアップしているという錯覚を与えます。

これが終了すると（jqueryのアニメーションコールバック関数を参照）、ページの上部（最初の画像セット）から隠されたdivを、appendTo()関数を使用して下部に移動して、内側divの終わり。同時に、topの値を再び0に設定する必要があります。したがって、ループを再び開始します。

希望はこれが理にかなっています。 :)質問は私に叫びを与える。