将下一个和上一个按钮添加到Jquery Carousel的缩略图图像中

Question

我有兴趣向现有的jquery轮播添加下一个和上一个按钮。 单击下一个按钮将选择先前选择的缩略图右侧的缩略图，因此也将更改较大的图片。 单击上一个按钮将导致选择左侧的缩略图。 循环是可选的，但更可取（在选择最后一个图像时单击右按钮应选择第一个图像，反之亦然）。

我在下面的脚本上附加了一个链接： http : //jsfiddle.net/SRNBn/

这是从html开始的代码：

<div id="imgDetail">
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" alt="" id="bigImg" />
<ul>
  <li><img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" class="thumb" /></li>
  <li><img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_2.jpg"  class="thumb" /></li>
  <li><img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="thumb" /></li>
</ul>

CSS：

.thumb { width: 75px; height: 75px; } li { display: inline; margin-right: 10px; }

JavaScript：

$('#imgDetail li img').hover(function(){
    $('#bigImg').attr('src',$(this).attr('src'));
});

Answer 1

你可以这样

$('#next').on('click',function(){
 var imgSrc = $('#bigImg').attr('src');
    var nextSrc = $('ul img[src="'+imgSrc+'"]').closest('li').next().find('img').attr('src');
    console.log(nextSrc);
    nextSrc ==undefined?$('#bigImg').attr('src',$('ul img:first').attr('src')): $('#bigImg').attr('src',nextSrc);
});
$('#prev').on('click',function(){
 var imgSrc = $('#bigImg').attr('src');
    var nextSrc = $('ul img[src="'+imgSrc+'"]').closest('li').prev().find('img').attr('src');
    console.log(nextSrc);
    nextSrc ==undefined?$('#bigImg').attr('src',$('ul img:last').attr('src')): $('#bigImg').attr('src',nextSrc);
});

演示