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);
});

DEMO

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

1 个答案: