需要一些关于jQuery轮播功能的想法

Question

我正在使用jQuery图像轮播/旋转器，而且我已经卡住了。通常情况下，我使用Bootstrap作为我的旋转木马，我很乐意再次这样做 - 但这个旋转木马还有一个额外的功能，我认为Bootstrap无法处理。我们使用Smarty模板，因此轮播内容和轮播中的项目数量是完全可变的。

我附上了一张图片，说明我想做什么。图形上的A部分是典型的缩略图和基于箭头的轮播导航。 B部分是旋转木马中的当前图像，从底部向上滑动。 A节和B节都在Bootstrap中工作。 C部分是我遇到麻烦的地方。当旋转木马转动时，我需要显示标题，在三个给定的容器中循环。我希望标题从上到下移动（下一个标题和上一个标题与我绘制它们的位置相反，doh！）。

如果有人知道可以设置或修改的插件来执行此操作，那就太棒了。我也想听听任何人如何做这个习惯的想法。我想添加像.active，.previous和.next这样的类是一种方法，但我不知道如何处理索引。老实说，这接近我的能力的上层，这就是为什么我需要你的额外踢。

不幸的是，我无法与您分享我当前的Bootstrap / Smarty代码:(但是，我很乐意回答您的任何问题。

Answer 1

示例（另请参阅：http://bootply.com/65289和http://bootply.com/65305）

更新 http://bootply.com/65305使用数据标题和数据内容属性来显示字幕

jQuery插件

我将以下代码包装在一个插件中：http://plugins.jquery.com/captionthumbcarousel/

html （包括您的图片列表）：

    <div class="container" id="firstrow">
        <div class="row-fluid">
<div class="span3" id="thumbs">
<button id="previousimage">Previous</button>    
<button id="nextimage">Next</button>
</div>          
<div class="span6" id="currentimage"></div> 
<div class="span3" id="titles"></div>           
<div id="carousal">
    <img src="http://placehold.it/350/0000FF" title="blue image 1">
    <img src="http://placehold.it/350/CCEEFF" title="yelow image 2">
    <img src="http://placehold.it/350/088A4B" title="green image 3">
    <img src="http://placehold.it/350/C47451" title="orange image 4">
    <img src="http://placehold.it/350/000000" title="black image 5">
    <img src="http://placehold.it/350/8D38C9" title="voilet image 6">
</div>  
        </div>  
    </div>

<强>的javascript ：

 $('#carousal').hide();
 var number = $('#carousal img').length;
 var numberofthumbs = 4;

 var current = 0;
 var images = $.makeArray($('#carousal img').clone());
 var ci = $.makeArray($('#carousal img').clone());
 $('#nextimage').before(images[0]);
 $('#nextimage').before(images[1]);
 $('#nextimage').before(images[2]);
 $('#nextimage').before(images[3]);

 $('#titles').append('<span>' + images[number-1].title + '</span><br>');
 $('#titles').append('<span>' + images[current].title + '</span><br>');
 $('#titles').append('<span>' + images[current+1].title + '</span><br>');

 $('#currentimage').html(ci[0]);

  $('#previousimage').click(function()
 {
     $('#thumbs img').last().remove();
     $('#previousimage').after(images[(current-1+number)%number]);
     $('#titles span').last().remove();
     $('#titles br').last().remove();
     $('#titles').prepend('<span>' + images[(current-2+number)%number].title + '</span><br>');
     current = ((current-1+number)%number);
     $('#currentimage').html(ci[current]);
 });

 $('#nextimage').click(function()
 {
     $('#thumbs img').first().remove();
     $('#nextimage').before(images[(current+numberofthumbs)%number]);
     $('#titles span').first().remove();
     $('#titles br').first().remove();
     $('#titles').append('<span>' + images[(current+2)%number].title + '</span><br>');
     current = ((current+1)%number);
     $('#currentimage').html(ci[current]);
 });     

一些 css 来设置拇指的样式：

   #thumbs img {width:25%; display: block;}

也许将您的图片放在一个列表中并使用.html（）来获得更灵活的图像副本。