0

我花了一天的大部分时间试图解决这个问题，现在我需要寻求帮助。

我有一个修改后的引导轮播，当点击缩略图导航时，它会显示拇指的较大图像。拇指导航-

<ul class="carousel-linked-nav" id="front_mktng_list_thumb">
          <li class="active front_mktng_thumbs"><a href="#1"><img class="htttp://link/to.jpg"></a></li>
          <li class="front_mktng_thumbs"><a href="#2"><img class="thumb_mktng_border" src="http://link/to/thumb.jpg"></a></li>
          <li class="front_mktng_thumbs"><a href="#3"><img class="thumb_mktng_border" src="http://link/to/thumb.jpg"></a></li>
          <li class="front_mktng_thumbs"><a href="#4"><img class="thumb_mktng_border" src="http://link/to/thumb.jpg"></a></li>
</ul>

轮播中显示的较大图像基于用户在导航中单击的内容-

<div id="myCarousel" class="carousel slide carousel-fade">
  <div class="carousel-inner span6 image_mktng_border" id="front_mktng_image" > 
    <div class="active item"><img src="http://link/to/large.jpg"></div>
    <div class="item"><img src="http://link/to/large.jpg"></div>
    <div class="item"><img src="http://link/to/large.jpg"></div>
    <div class="item"><iframe width="630" height="330" src="http://www.youtube.com/embed/xW7AAKjDclQ" frameborder="0" allowfullscreen></iframe></div>
  </div>  
</div>

这里有一些技巧我需要重构（间隔是一个很大的数字，以确保基于用户点击的图像切换，.stopPropagation 不用于 href 等）

  $('#myCarousel').carousel({
    interval: 444000,
    pause: true
  });

  $('.carousel-linked-nav > li > a').click(function() {
      var item = Number($(this).attr('href').substring(1));
      $('#myCarousel').carousel(item - 1);
      $('.carousel-linked-nav .active').removeClass('active');
      $(this).parent().addClass('active');
      return false;
  });

现在，我一天中大部分时间都花在了获取描述性文本，以便在每个图像出现时显示它。基本上以与图像相同的方式显示，但不在轮播中，并使用相同的缩略图<a>隐藏和显示文本。见图片。

我非常熟悉如何通过点击事件显示隐藏文本，但我不确定如何让它与现有的轮播一起正常工作。

我一直在思考的过程是我可以添加一个类和display: none;包含我想要显示的描述性文本的 div。然后我可以简单地切换该类（带有条件），只要我在a单击时添加一个类。

我是否需要重构我的轮播以允许这种行为（多个 div 操作）？我的思维过程/解决方案不正确吗？

我需要一些建议。感谢您的关注和观看！

更新

我想显示的文本未反映在屏幕截图中

<div class="row">
  <div class="offset2">
    <div id="first_description">Quick list everything town</div><br>
    <div id="second_description">View of what's been done, what's next and who we're waiting on.</div><br>
    <div id="third_description">Have people do thing for you without looking like a jerk</div><br>
    <div id="fourth_description">Here's how I muthloving use it</div><br>
  </div>
</div>

在此处输入图像描述

在此处输入图像描述

4

1 回答 1

1

Tmacram，由于 twitter 引导文档完全不足，您发现这个问题很困难，我并不感到惊讶。

传递给slide和slid处理程序的事件对象允许使用表达式确定活动项：

$(event.target).find('.carousel-inner .active')

因此它在其他项目中的索引：

$(event.target).find('.carousel-inner .active').index()

因此，您可以选择并显示相应的文本：

$('#myCarousel').on('slid', function(event) {
    var idx = $(event.target).find('.carousel-inner .active').index();
    msg($(".row .offset2 div").eq(idx).text());
}).trigger('slid');

wheremsg()是在适当的容器中显示文本的函数。您将需要编写自己的函数（如果尚未编写）。

.trigger('slid')在第一次滑动操作之前显示初始轮播项目的文本是必要的。

演示（基于我在搜索后找到的演示的一个分支）。

或者，您可能希望直接显示/隐藏文本 div，而不是重复复制活动文本 -演示

于 2012-12-16T01:33:39.900 回答