使用ContentFlow.js Javascript的旋转木马

我有一个封面流动式旋转木马，有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>

它利用了这个转盘盖流：

我想有一个单独的div，它完全独立于随当前内容变化的旋转木马（单击每个图像）。当前内容是中间最大的一个（参见上面提到的网站）。以下是根据旋转木马中哪个项目处于活动状态而显示和消失的div

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

---

我需要帮助构思我将如何做到这一点

一个开始就是把你的div（div1，div2，div3）放在一个带有类标题的div中。contentflow显示每个活动项的唯一标题，因此带有div的标题将随活动项的每次更改而更改（无需显示：无）：

内容1
内容2
内容3

<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>