所以我有一个包含图像 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
我假设我需要以某种方式找到被点击的图像在数组中的编号,然后将编号增加或减少到新图像的编号。
这应该如何实现?
最佳答案
看下面的输出,你可以使用这段代码
- 先设置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>
关于javascript - jQuery 数组中的下一个和上一个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27463232/