轮播使用 ContentFlow.js Javascript答案

【问题标题】：Carousel Using ContentFlow.js Javascript轮播使用 ContentFlow.js Javascript
【发布时间】：2012-10-15 02:33:32
【问题描述】：

我有一个带有 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>

在构思我将如何做到这一点方面需要帮助。

【问题讨论】：

标签： javascript jquery carousel

【解决方案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>

【讨论】：