0

私はいくつかの同様の質問を検討しましたが、これをすべて結び付けるための答えを見つけることができないようです。画像と対応するテキストのブロックが10秒ごとに変化するスライドショーを作成する方法を探しています。（以下、「回転」と表示する場合、角度をオンにすることを意味するのではなく、表示されているスライドから別のスライドに変更することを意味します）

さらに明確にするために、1つのテキストブロックと1つの画像を「ペア」と呼びましょう。テキストのブロックは1つに含まれ、画像は別のに含まれます。このスライドショーでは、10ペアにします。

単純な時間遅延JavaScriptを使用して画像を簡単に回転させることができますが、同様のJavaScriptを使用してテキストを回転すると、画像とテキストが同期しなくなることがあります（同時に変更しないでください）。

だから....私の質問は2部構成の質問です。1.）私はこれに正しい方法でアプローチしていますか？もしそうなら、テキストと画像がペアのままで同時に回転することをどのように確認しますか？2.）同じdiv内でコンテンツをローテーションする代わりに、10個のdivペア（合計20個）を作成し、20個のうち2個を同時に表示するためのスクリプトを作成する必要がありますか？もしそうなら...そうするためのスクリプトに関するアイデアはありますか？

現在、次のスクリプトを使用して画像を交換しています。

<!--- Start Image Cycler Script --->
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var timeDelay = 10; // change delay time in seconds
var Pix = new Array
("images2/slide_pics/92028.png" 
,"images2/slide_pics/92026.png" 
,"images2/slide_pics/92027.png" 
,"images2/slide_pics/92534.png" 
,"images2/slide_pics/92034.png" 
,"images2/slide_pics/92555.png" 
,"images2/slide_pics/92700.png" 
,"images2/slide_pics/A73495.png" 
,"images2/slide_pics/92701.png"  
);
var howMany = Pix.length;
timeDelay *= 1000;
var PicCurrentNum = 0;
var PicCurrent = new Image();
PicCurrent.src = Pix[PicCurrentNum];
function startPix() {
setInterval("slideshow()", timeDelay);
}
function slideshow() {
PicCurrentNum++;
if (PicCurrentNum == howMany) {
PicCurrentNum = 0;
}
PicCurrent.src = Pix[PicCurrentNum];
document["ChangingPix"].src = PicCurrent.src;
}
//  End -->
</script>
<!--- End Image cycler Script --->

        <img name="ChangingPix" src="images2/slide_pics/92028.png" alt="" width="570" height="346"  class="head-pic" />
4

2 に答える 2

1

（申し訳ありませんが、私の最後のコメントはそれ自体を投稿することにしました）

Kevin Nelson が提案したように、画像とテキストを同じ「ブロック」に入れるだけです。

<div id="slider">


    <div class="slide">
    <img src="#" alt"this is the image" />
    <p>This is the description for this particular slide</p>
    </div>

    <div class="slide">
    <img src="#" alt"this is the image" />
    <p>This is the description for this particular slide</p>
    </div>

    <div class="slide">
    <img src="#" alt"this is the image" />
    <p>This is the description for this particular slide</p>
    </div>

    </div>

そうすれば、テキストと画像が同期しなくなるという問題に遭遇することはありません。無料のコンテンツ/画像スライダーがたくさんあります。最近、クライアントの作業にSlides.jsを使用しています。好みに合わせてセットアップしてカスタマイズするのは本当に簡単です。また、多くのオプションがあります (ホバーで一時停止、自動再生など)。

于 2011-09-01T20:19:44.547 に答える
0

質問を誤解しているかもしれませんが、テキストと画像を同時に回転させたい場合は、ブロックを作成してブロック全体を回転させてみませんか。このページを参照してください：

http://rhmachine.flashfirehosting.com/

私が質問を正しく理解していて、そのようなものが必要な場合は、私に知らせてください。私がそれを行うために使用しているjqueryプラグインを投稿します。

于 2011-09-01T18:30:18.833 に答える