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 与随当前内容变化的轮播完全分开（点击每个图像）。当前内容是中间最大的内容（参见上面引用的网站）。以下是根据轮播中活动的项目显示和消失的 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

一个开始的地方是将您的 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 回答