javascript - jQuery 数组中的下一个和上一个

Question

所以我有一个包含图像 URL 的 jQuery 数组:

var images = ["link1","link2","etc","etc"];

然后当单击图像的缩略图时，我有这段代码:

$('.thumbnail').click(function(){
  var link = $(this).attr('src');
  $('.large_view').prepend('<img src="'+link+'" width="450px"/>');
});

一切正常，但我希望代码能够正常工作，这样当我单击按钮 .next 和 .previous 时，下一张/上一张图像的 URL(在array) 将替换当前在 .large_view

中预先设置的

我假设我需要以某种方式找到被点击的图像在数组中的编号，然后将编号增加或减少到新图像的编号。

这应该如何实现？

Answer 1

看下面的输出，你可以使用这段代码

• 先设置index=0，做一个默认图片
• 下一次检查如果不是 3，则将 1 加到索引
• 如果 3 则设置回零
• 将此逻辑颠倒过来

   var link = ["http://img4.wikia.nocookie.net/__cb20111201004451/internetphoto/images/8/81/Google_Image_Result_for_http-wallpaperstock.net-small-cute-kitty_wallpapers_24216_1920x1200.jpg",
            "https://lh6.ggpht.com/RIt3-kTajLWZIxunxQz9uEQp7cQ6htqFYZTcwbJXwsyKKp35BCLxKnvzswAiDfS5zQ=h310",
            "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQ1NIp3cJPgEDVBQJ_jwXO27Xa-9fJqdQXuYEYa2S3NgiM8OZSf",
              "https://lh5.ggpht.com/T2acx2jKADSe1iwM6GbinPlY_1DGqF4qQAI37-ua6hwQ-DrVYDXmqRPz2HuzwrmFyQ=h310"];
 index=0;


          
 $('.large_view').prepend('<img src="'+link[index]+'" width="450px"/>');

           $('.next').click(function(){
           index = (index==link.length-1)?0:(index+1);
            
           $('.large_view img').attr('src',link[index]);
           });
    
         $('.previous').click(function(){
         index = (index==0)?(link.length-1):(index-1);
          $('.large_view img').attr('src',link[index]);
         });

div.large_view img{
width:400px;
height:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="large_view">
 
  </div>

<button class="previous">previous</button>
<button class="next">next</button>