需要一些关于 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 使用 data-title 和 data-content 属性来显示标题

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() 来获取图像的副本以更加灵活。