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（在数组中）将被替换目前位于.large_view

的那个

我认为不知怎的，我需要找到点击图像中数组中的哪个数字，然后将数字增加或减少到新图像的数字。

如何实现这一目标？

Answer 1

请参阅下面的输出，您可以使用此代码

首先设置index = 0并制作默认图像
下次检查是否不是3，将1增加到索引
如果3然后设置回零
反转以前的

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: