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

一个开始的地方是将div（div1，div2，div3）放在带有类标题的div中。 contentflow显示每个活动项目的唯一标题，因此带有div的标题将在活动项目的每次更改时更改（不需要显示：none）：

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

Carousel使用ContentFlow.js Javascript

1 个答案: