將下一個和上一個按鈕添加到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);
});

演示