Javascript 添加缩略图库和较大图像库的“下一步”和“上一步”按钮

我正在尝试为缩略图和较大的图像库添加“下一步”和“上一步”按钮。“下一步”和“上一步”按钮也应该支持键盘事件侦听器

这是我尝试过的链接

我需要一些帮助。

见

问题是

$(['next','prev']).each(function(){
    var that=this;
    $('#'+that).click(function(){
        $('#thumbs img.clicked')[that]().click();
    });
});

因为现在你有

<a href="#" id="tnext">Next</a>
<a href="#" id="tprev">Prev</a>

及

---

在这里，我已经完成了上述问题的完整解决方案，添加了“下一步”和“上一步”按钮

演示：

HTML

<div id="panel">
  <div class="controls">
    <img src="http://aux.iconpedia.net/uploads/1698581142461241089.png" class="prev" />
    <span>
      Thumbnail Navigation 
    </span>
    <img src="http://cdn1.iconfinder.com/data/icons/fatcow/32x32_0760/resultset_next.png" class="next" />
  </div>


  <div id="thumbs">
    <div class="thumb active">
      <img src="http://images.replacements.com/images/images5/china/C/lenox_china_garden_birds_no_box_P0000014675S0122T2.jpg" width="100" height="80" />
    </div>
    <div class="thumb">
      <img src="http://coolfunnyanimals.com/thumb/funny-animal-bird-47.jpg" width="100" height="80" />
    </div>
    <div class="thumb">
      <img src="http://learnordie.files.wordpress.com/2012/05/thrasher.jpg" width="100" height="80" />
    </div>
    <div class="thumb">
      <img src="http://3.bp.blogspot.com/_N_mOB63qPaE/TSC17ceXRII/AAAAAAAARaQ/TeDi9FYIBPw/s1600/Flying-Bird-Picture-2.jpg" width="100" height="80" />
    </div>
    <div class="thumb">
      <img src="http://www.kevinhearne.com/wp-content/uploads/2011/11/pic6.jpg" width="100" height="80" />
    </div>
  </div>


  <div class="controls" align="center" width="400px">
    <img src="http://aux.iconpedia.net/uploads/1698581142461241089.png" class="prev" />
    <span>
      Large Image Navigation 
    </span>
    <img src="http://cdn1.iconfinder.com/data/icons/fatcow/32x32_0760/resultset_next.png" class="next" />
  </div>


  <div id="large">
    <div class="bigthumb active">
      <img src="http://images.replacements.com/images/images5/china/C/lenox_china_garden_birds_no_box_P0000014675S0122T2.jpg" />
    </div>
    <div class="bigthumb">
      <img src="http://coolfunnyanimals.com/thumb/funny-animal-bird-47.jpg" />
    </div>
    <div class="bigthumb">
      <img src="http://learnordie.files.wordpress.com/2012/05/thrasher.jpg" />
    </div>
    <div class="bigthumb">
      <img src="http://3.bp.blogspot.com/_N_mOB63qPaE/TSC17ceXRII/AAAAAAAARaQ/TeDi9FYIBPw/s1600/Flying-Bird-Picture-2.jpg" />
    </div>
    <div class="bigthumb">
      <img src="http://www.kevinhearne.com/wp-content/uploads/2011/11/pic6.jpg" />
    </div>
  </div>
</div>

jQuery:

#thumbs{
  text-align:center;
  background:#77a5c6;
  padding:5px;
}
.thumb{
  display:inline-block;
  margin:0px;
  padding:0px;
  cursor:pointer;
}
#thumbs .active{
  border:3px solid #333;
}
.controls{
  margin-left:10px;
}
.controls img{
  cursor:pointer;
  margin:0px;
}
.controls span{
  font-size:13px;
  display:inline-block;
  vertical-align:top;
  margin-top:5px;
}
#large{
  text-align:center;
}
#large .bigthumb{
  display:none;
}
#large .active{
  display:block;
}
#large .active img{
  border:2px solid #333;
}

$(function() {
    $("#thumbs").find(".thumb:first").addClass("active");
    $("#large").find(".bigthumb:first").addClass("active");

    var getIndex = $("#thumbs").find(".active").index();

    $(".controls").each(function() {
        $(this).find(".next").click(function() {
            getIndex = $("#thumbs").find(".active").index();
            getIndex += 1;
            if (getIndex > ($("#thumbs").find(".thumb").length - 1)) {
                getIndex = 0;
            }
            setActiveImage(getIndex);
        });
        $(this).find(".prev").click(function() {
            getIndex -= 1;
            if (getIndex < 0) {
                getIndex = $("#thumbs").find(".thumb").length - 1;
            }
            setActiveImage(getIndex); //Set/Show Active Image
        });
    });

});

function setActiveImage(index) {
    if (typeof(index) == "undefined" || index == "" || index == null) index = 0;

    $("#thumbs").find(".thumb").removeClass("active");
    $("#thumbs").find(".thumb:eq(" + index + ")").addClass("active");
    $("#large").find(".bigthumb").removeClass("active");
    $("#large").find(".bigthumb:eq(" + index + ")").addClass("active");
}

$（函数（）{
$（“#thumbs”）.find（“.thumb:first”）.addClass（“active”）；
$（“#大型”）.find（“.bigtumb:first”）.addClass（“活动”）；
var getIndex=$（“#拇指”）.find（“.active”）.index（）；
$（“.controls”）。每个（函数（）{
$（this）。查找（“.next”）。单击（函数（）{
getIndex=$（“#拇指”）.find（“.active”）.index（）；
getIndex+=1；
如果（getIndex>（$（“#thumbs”）.find（“.thumb”）.length-1））{
getIndex=0；
}
setActiveImage（getIndex）；
});
$（this）。查找（“.prev”）。单击（函数（）{
getIndex-=1；
if（getIndex<0）{
getIndex=$（“#thumbs”）.find（“.thumb”）.length-1；
}
setActiveImage（getIndex）；//设置/显示活动图像
});
});
});
函数setActiveImage（索引）{
如果（typeof（index）=“未定义”| | index==“”| | index==null）index=0；
$（“#thumbs”）.find（“.thumb”）.removeClass（“active”）；
$（“#thumbs”）.find（“.thumb:eq（“+index+”）.addClass（“活动”）；
$（“#大型”）.find（“.bigtumb”）.removeClass（“活动”）；
$（“#大型”）.find（“.bigtumb:eq（“+index+”））.addClass（“活动”）；
}

---

演示：

你好，又是我。那些丑陋的特征是什么？更干净了…@Oriol:嗨，事实上我想把它设置为我的代码。我的代码中有一些更改。以前我使用的是XML。但现在我不是。您可以将其编辑到我的代码中吗？但是缩略图和较大图像的“下一步”和“上一步”功能应该不同。因为缩略图应该显示其图像，较大的图像应该显示其图像，但是单击每个缩略图后，将显示特定的较大图像我完成了此任务我有一个问题我发布了此消息

<div id="panel">
  <div class="controls">
    <img src="http://aux.iconpedia.net/uploads/1698581142461241089.png" class="prev" />
    <span>
      Thumbnail Navigation 
    </span>
    <img src="http://cdn1.iconfinder.com/data/icons/fatcow/32x32_0760/resultset_next.png" class="next" />
  </div>


  <div id="thumbs">
    <div class="thumb active">
      <img src="http://images.replacements.com/images/images5/china/C/lenox_china_garden_birds_no_box_P0000014675S0122T2.jpg" width="100" height="80" />
    </div>
    <div class="thumb">
      <img src="http://coolfunnyanimals.com/thumb/funny-animal-bird-47.jpg" width="100" height="80" />
    </div>
    <div class="thumb">
      <img src="http://learnordie.files.wordpress.com/2012/05/thrasher.jpg" width="100" height="80" />
    </div>
    <div class="thumb">
      <img src="http://3.bp.blogspot.com/_N_mOB63qPaE/TSC17ceXRII/AAAAAAAARaQ/TeDi9FYIBPw/s1600/Flying-Bird-Picture-2.jpg" width="100" height="80" />
    </div>
    <div class="thumb">
      <img src="http://www.kevinhearne.com/wp-content/uploads/2011/11/pic6.jpg" width="100" height="80" />
    </div>
  </div>


  <div class="controls" align="center" width="400px">
    <img src="http://aux.iconpedia.net/uploads/1698581142461241089.png" class="prev" />
    <span>
      Large Image Navigation 
    </span>
    <img src="http://cdn1.iconfinder.com/data/icons/fatcow/32x32_0760/resultset_next.png" class="next" />
  </div>


  <div id="large">
    <div class="bigthumb active">
      <img src="http://images.replacements.com/images/images5/china/C/lenox_china_garden_birds_no_box_P0000014675S0122T2.jpg" />
    </div>
    <div class="bigthumb">
      <img src="http://coolfunnyanimals.com/thumb/funny-animal-bird-47.jpg" />
    </div>
    <div class="bigthumb">
      <img src="http://learnordie.files.wordpress.com/2012/05/thrasher.jpg" />
    </div>
    <div class="bigthumb">
      <img src="http://3.bp.blogspot.com/_N_mOB63qPaE/TSC17ceXRII/AAAAAAAARaQ/TeDi9FYIBPw/s1600/Flying-Bird-Picture-2.jpg" />
    </div>
    <div class="bigthumb">
      <img src="http://www.kevinhearne.com/wp-content/uploads/2011/11/pic6.jpg" />
    </div>
  </div>
</div>

#thumbs{
  text-align:center;
  background:#77a5c6;
  padding:5px;
}
.thumb{
  display:inline-block;
  margin:0px;
  padding:0px;
  cursor:pointer;
}
#thumbs .active{
  border:3px solid #333;
}
.controls{
  margin-left:10px;
}
.controls img{
  cursor:pointer;
  margin:0px;
}
.controls span{
  font-size:13px;
  display:inline-block;
  vertical-align:top;
  margin-top:5px;
}
#large{
  text-align:center;
}
#large .bigthumb{
  display:none;
}
#large .active{
  display:block;
}
#large .active img{
  border:2px solid #333;
}

$(function() {
    $("#thumbs").find(".thumb:first").addClass("active");
    $("#large").find(".bigthumb:first").addClass("active");

    var getIndex = $("#thumbs").find(".active").index();

    $(".controls").each(function() {
        $(this).find(".next").click(function() {
            getIndex = $("#thumbs").find(".active").index();
            getIndex += 1;
            if (getIndex > ($("#thumbs").find(".thumb").length - 1)) {
                getIndex = 0;
            }
            setActiveImage(getIndex);
        });
        $(this).find(".prev").click(function() {
            getIndex -= 1;
            if (getIndex < 0) {
                getIndex = $("#thumbs").find(".thumb").length - 1;
            }
            setActiveImage(getIndex); //Set/Show Active Image
        });
    });

});

function setActiveImage(index) {
    if (typeof(index) == "undefined" || index == "" || index == null) index = 0;

    $("#thumbs").find(".thumb").removeClass("active");
    $("#thumbs").find(".thumb:eq(" + index + ")").addClass("active");
    $("#large").find(".bigthumb").removeClass("active");
    $("#large").find(".bigthumb:eq(" + index + ")").addClass("active");
}