javascript - 在jQuery数组中,下一个和上一个

  显示原文与译文双语对照的内容
0 0

因此,我有一个带有图像网址的jQuery array:

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

然后我有了这个代码,当点击一个图像的缩略图时:

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

这很好,但我希望代码工作,当单击按钮 .next.previous 时,图像( 在 array 中)的下一个/前一个URL将替换。

我想我需要在 array 中找到所单击的图像的数字,然后增加或者减少新图像的数字。

如何完成?

时间:原作者:5个回答

0 0

请参见输出 below,你可以使用这里代码

  • 首先设置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>
原作者:
...