旋轉木馬使用ContentFlow.js的Javascript

Question

我有一個封面流風格轉盤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從完全分開轉盤隨當前內容發生變化（點擊每張圖片）。目前的內容是中間最大的內容（參見上面引用的網站）。以下是根據旋轉木馬中的哪個項目處於活動狀態而顯示並消失的div。

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

需要幫助概念化我將如何做到這一點。

Answer 1

一個開始的地方是把divs（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>