javascript - 我需要有关图片编号的文本以在 jcarousel 中更改

Question

我有一个在表达式引擎中使用的 jcarousel。代码如下

    <div id="carousela" class="jcarousel image-cell">
      <ul>
        {exp:cg_industry_data:images vehicle_id="{id}" size="large"}
        <li {if {index} == {segment_3}} class="active"{/if}><a href="car-gallery/{id}/{index}"  onclick="return false" class="noevents"><img src="{img_url}" alt="" /></a> </li>
        {/exp:cg_industry_data:images}
      </ul>
    </div>

轮播效果很好。

现在我想要一个类似下面的文本 Picture xxx of {imageCount} 。我需要让它显示当前正在查看的图像。 imageCount 工作得很好。有人可以帮我吗/？或者至少在使用 jcarousel 时如何确定当前显示的图像？呈现的 html 如下所示

<div class="index">Picture 1 of 15</div>
<div id="carousela" class="jcarousel image-cell">
  <ul>
    <li  class="active"><a href="car-gallery/D_2650745/1"  onclick="return false" class="noevents"><img src="/0265/0745/2014_hyundai_i30_stock_2650745_1_l.jpg" alt="" /></a> </li>
    <li ><a href="car-gallery/D_2650745/2"  onclick="return false" class="noevents"><img src="/0265/0745/2014_hyundai_i30_stock_2650745_2_l.jpg" alt="" /></a> </li>
    <li ><a href="car-gallery/D_2650745/3"  onclick="return false" class="noevents"><img src="/0265/0745/2014_hyundai_i30_stock_2650745_3_l.jpg" alt="" /></a> </li>
    <li ><a href="car-gallery/D_2650745/4"  onclick="return false" class="noevents"><img src="/0265/0745/2014_hyundai_i30_stock_2650745_4_l.jpg" alt="" /></a> </li>
    <li ><a href="car-gallery/D_2650745/5"  onclick="return false" class="noevents"><img src="/0265/0745/2014_hyundai_i30_stock_2650745_5_l.jpg" alt="" /></a> </li>
    <li ><a href="car-gallery/D_2650745/6"  onclick="return false" class="noevents"><img src="/0265/0745/2014_hyundai_i30_stock_2650745_6_l.jpg" alt="" /></a> </li>
    <li ><a href="car-gallery/D_2650745/7"  onclick="return false" class="noevents"><img src="/0265/0745/2014_hyundai_i30_stock_2650745_7_l.jpg" alt="" /></a> </li>
    <li ><a href="car-gallery/D_2650745/8"  onclick="return false" class="noevents"><img src="/0265/0745/2014_hyundai_i30_stock_2650745_8_l.jpg" alt="" /></a> </li>
    <li ><a href="car-gallery/D_2650745/9"  onclick="return false" class="noevents"><img src="/0265/0745/2014_hyundai_i30_stock_2650745_9_l.jpg" alt="" /></a> </li>
    <li ><a href="car-gallery/D_2650745/10"  onclick="return false" class="noevents"><img src="/0265/0745/2014_hyundai_i30_stock_2650745_10_l.jpg" alt="" /></a> </li>
    <li ><a href="car-gallery/D_2650745/11"  onclick="return false" class="noevents"><img src="/0265/0745/2014_hyundai_i30_stock_2650745_11_l.jpg" alt="" /></a> </li>
    <li ><a href="car-gallery/D_2650745/12"  onclick="return false" class="noevents"><img src="/0265/0745/2014_hyundai_i30_stock_2650745_12_l.jpg" alt="" /></a> </li>
    <li ><a href="car-gallery/D_2650745/13"  onclick="return false" class="noevents"><img src="/0265/0745/2014_hyundai_i30_stock_2650745_13_l.jpg" alt="" /></a> </li>
    <li ><a href="car-gallery/D_2650745/14"  onclick="return false" class="noevents"><img src="/0265/0745/2014_hyundai_i30_stock_2650745_14_l.jpg" alt="" /></a> </li>
    <li ><a href="car-gallery/D_2650745/15"  onclick="return false" class="noevents"><img src="/0265/0745/2014_hyundai_i30_stock_2650745_15_l.jpg" alt="" /></a> </li>
  </ul>
</div>
<div id="navigation" class="clearfix">
<span class="button prevPage"></span>
<div id="carousel">
  <ul>
    <li  class="active"><a href="car-gallery/D_2650745/1"><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_1_t.jpg) center;"></span></a></li>
    <li ><a href="car-gallery/D_2650745/2"><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_2_t.jpg) center;"></span></a></li>
    <li ><a href="car-gallery/D_2650745/3"><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_3_t.jpg) center;"></span></a></li>
    <li ><a href="car-gallery/D_2650745/4"><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_4_t.jpg) center;"></span></a></li>
    <li ><a href="car-gallery/D_2650745/5"><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_5_t.jpg) center;"></span></a></li>
    <li ><a href="car-gallery/D_2650745/6"><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_6_t.jpg) center;"></span></a></li>
    <li ><a href="car-gallery/D_2650745/7"><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_7_t.jpg) center;"></span></a></li>
    <li ><a href="car-gallery/D_2650745/8"><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_8_t.jpg) center;"></span></a></li>
    <li ><a href="car-gallery/D_2650745/9"><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_9_t.jpg) center;"></span></a></li>
    <li ><a href="car-gallery/D_2650745/10"><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_10_t.jpg) center;"></span></a></li>
    <li ><a href="car-gallery/D_2650745/11"><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_11_t.jpg) center;"></span></a></li>
    <li ><a href="car-gallery/D_2650745/12"><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_12_t.jpg) center;"></span></a></li>
    <li ><a href="car-gallery/D_2650745/13"><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_13_t.jpg) center;"></span></a></li>
    <li ><a href="car-gallery/D_2650745/14"><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_14_t.jpg) center;"></span></a></li>
    <li ><a href="car-gallery/D_2650745/15"><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_15_t.jpg) center;"></span></a></li>
  </ul>
</div>
<span class="button nextPage" ></span> 

Answer 1

这主要是伪代码，但在初步检查插件后，您需要挂接到插件 jcarousel:targetin事件。这意味着当轮播图像被切换时它会做一些事情。因此，我们将基本标记更改为:

<div class="jcarousel">
  <ul>
    <li><img src="img1.jpg" alt=""><p>HERP</p></li>
    <li><img src="img2.jpg" alt=""><p>DERP</p></li>
    <li><img src="img3.jpg" alt=""><p>HERPDERP</p></li>
  </ul>
</div>
<div class="comment"></div>

在哪里.comment表示评论的去向。

然后，当您实例化插件时，执行如下操作:

$(function() {
  $('.jcarousel').on('jcarousel:targetin', 'li', function(event, carousel) {
    var comment = $(this).find('p').html();
    if(comment) $('.comment').html(comment);
  });
  $('.jcarousel').jcarousel();
});

注意:确保 .on出现在 .jcarousel 之前否则旋转木马将不知道在加载时捕获初始“更改”，并且第一张幻灯片不会添加其评论。

这使得每当一个新的<li>成为焦点(又名:单击前进/后退)，它将搜索 li对于 p捕获它的 html 并设置 .comment 的 html

这应该可以满足您的需求，但您需要相应地对其进行修改，并可能向 p 添加一些 CSS 以使其不显示。