0

7 つの画像を含むカバー フロー スタイルのカルーセルがあります。

<!-- ===== FLOW ===== -->
<div id="contentFlow" class="ContentFlow">
    <!-- should be place before flow so that contained images will be loaded first -->
    <div class="flow">
            <a class="item" href="javascript:void(0);" id="toggle_value1"><img class="content" src="image1.png"/></a>            
            <a class="item" href="javascript:void(0);" id="toggle_value2"><img class="content" src="image2.png"/></a>            
            <a class="item" href="javascript:void(0);" id="toggle_value3"><img class="content" src="image3.png"/></a>            
            <a class="item" href="javascript:void(0);" id="toggle_value4"><img class="content" src="image4.png"/></a>            
            <a class="item" href="javascript:void(0);" id="toggle_value5"><img class="content" src="image5.png"/></a>            
            <a class="item" href="javascript:void(0);" id="toggle_value6"><img class="content" src="image6.png"/></a>            
            <a class="item" href="javascript:void(0);" id="toggle_value4"><img class="content" src="image7.png"/></a>            
    </div>
</div>

次のカルーセル カバー フローを利用します: http://jacksasylum.eu/ContentFlow/docu.php

現在のコンテンツ（各画像をクリック）で変化するカルーセルから完全に分離した別のdivが必要です。現在のコンテンツは、中央にあるコンテンツが最大のものです (上記の Web サイトを参照)。以下は、カルーセルでアクティブなアイテムに応じて表示および非表示になる div です。 

<div id="div1" style="display:none;"></div>
<div id="div2" style="display:none;"></div>
<div id="div3" style="display:none;"></div>

私がこれを行う方法を概念化するのに助けが必要です。

4

1 に答える 1

0

開始する場所の 1 つは、div (div1、div2、div3) をクラス キャプションを持つ div 内に配置することです。contentflow はアクティブなアイテムごとに固有のキャプションを表示するため、div のキャプションはアクティブなアイテムが変更されるたびに変更されます (表示する必要はありません: なし):

<div class="item"> <img class="content" src="someImageFile.jpg"/> 
 <div class="caption">
 <div id="div1">Content1</div>
 <div id="div2">Content2</div>
 <div id="div3">Content3</div>
 </div> </div>
于 2012-10-14T18:33:32.707 に答える