我用 jQuery、CSS 和 HTML 编写了一个画廊，我想添加下一张图片和上一张图片按钮，所以我将它们添加到页面中，并为它们创建了函数，但我不知道我将如何做到这一点。这是我的代码，如果有人知道任何好的方法，我会很高兴!谢谢! 编辑我还没有收到回复，所以我会尝试提供更多信息，我正在尝试在图像的左侧和右侧获取箭头，以便我可以转到上一个和下一个图像，我不知道该怎么做。
$(document).ready(function(){
$('.thumbnail').click(function(){
$('.backdrop').animate({'opacity':'.5'}, 300, 'linear');
$('.box').animate({'opacity' : '1.00'}, 300, 'linear');
$('.box, .selectors, .backdrop').css('display', 'block');
$('.box').html('<img class="boximg" src="' + $(this).attr('src') + '">');
//$('.box').html('<img class="boximg" src="' + src + '">');
});
$('.nextimg').click(function(){
$('.box').html('<img class="boximg" src="' + '">');
});
$('.previmg').click(function(){
$('.box').html('<img class="boximg" src="'+'">');
});
$('.backdrop').click(function(){
close_box();
});
});
$(document).keydown(function(event){
if (event.keyCode == 27 || event.keyCode == 13){
close_box();
};
});
function close_box(){
$('.backdrop, .box').animate({'opacity': '0'}, 300, 'linear', function(){
$('.backdrop, .box').css('display', 'none');
$('.selectors').css('display', 'none');
});
}.backdrop{
position: absolute;
display: none;
top: 0px;
left: 0px;
background-color: #000;
opacity: 0;
height: 100%;
width: 100%;
}
.box{
position: absolute;
display: none;
background-color: white;
opacity: 0;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
border-radius: 13px;
}
.close{
float: right;
margin-right: 5px;
}
.boximg {
position: absolute;
top: 3%;
left: 2%;
width: 96%;
height: 94%;
}
.thumbnail{
border-radius: 30px;
height: 300px;
width: 300px;
}
.selectors{
display: none;
}
.nextimg{
position: absolute;
right: 3%;
top: 50%;
}
.previmg{
position: absolute;
left: 3%;
top: 50%;
}<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</head>
<body>
<div class="images">
<img class="thumbnail" src="urlttr.jpeg">
<img class="thumbnail" src="http://www.hdwallpapers.eu/wp/sci-fi-planet-background-1920x1080.jpg">
<img class="thumbnail" src="http://www.wallpapersdb.org/wallpapers/beach/sunrise_1920x1080.jpg">
<img class="thumbnail" src="http://free-hq-wallpapers.com/wp-content/uploads/2009/07/New-York-Sunset-1920x1080.jpg">
</div>
<div class="backdrop"></div>
<div class="box"></div>
<div class="selectors">
<image class="nextimg" src="right_arrow.png">
<image class="previmg" src="left_arrow.png">
</div>
</body>
</html>最佳答案
将您的代码带到 jsfiddle，I came up with this as a solution .
<div class="images">
<!-- In the a-href you put the path to the big sized image. In the image src the small thumb path. -->
<a href="/city-q-c-640-480-3.jpg">
<img class="thumbnail" src="/city-q-c-640-480-3.jpg"/>
</a>
<a href="/sci-fi-planet-background-1920x1080.jpg">
<img class="thumbnail" src="/sci-fi-planet-background-1920x1080.jpg"/>
</a>
<a href="/sunrise_1920x1080.jpg">
<img class="thumbnail" src="/sunrise_1920x1080.jpg"/>
</a>
<a href="/New-York-Sunset-1920x1080.jpg">
<img class="thumbnail" src="/New-York-Sunset-1920x1080.jpg"/>
</a>
</div>
<div class="backdrop"></div>
<div class="box"></div>
<div class="selectors">
<img class="nextimg" src="right_arrow.png"/>
<img class="previmg" src="left_arrow.png"/>
</div>
您可以看到，我用 a 标签包围了拇指 - 您也可以使用数据属性或类似的东西来添加大版本图像的路径。
$(function() {
var $currentImageLink; // the current a tag
$('.images a').click(function(event){
event.preventDefault();
$currentImageLink = $(this);
$('.backdrop').animate({'opacity':'.5'}, 300, 'linear');
$('.box').animate({'opacity' : '1.00'}, 300, 'linear');
$('.box, .selectors, .backdrop').css('display', 'block');
$('.box').html('<img class="boximg" src="' + $(this).attr('href') + '">');
});
$('.nextimg').click(function() {
$currentImageLink = $currentImageLink.next('a');
if (0 == $currentImageLink.length) {
$currentImageLink = $('.images a:first-child');
}
$('.box').html('<img class="boximg" src="' + $currentImageLink.attr('href') + '">');
});
$('.previmg').click(function() {
$currentImageLink = $currentImageLink.prev('a');
if (0 == $currentImageLink.length) {
$currentImageLink = $('.images a:last-child');
}
$('.box').html('<img class="boximg" src="' + $currentImageLink.attr('href') +'">');
});
$('.backdrop').click(function() {
close_box();
});
});
$(document).keydown(function(event) {
if (event.keyCode == 27 || event.keyCode == 13) {
close_box();
}
});
function close_box() {
$('.backdrop, .box').animate({'opacity': '0'}, 300, 'linear', function() {
$('.backdrop, .box').css('display', 'none');
$('.selectors').css('display', 'none');
});
}
此外，我添加了变量 $currentImageLink，其中始终放置当前链接元素，该元素当时显示在您的图库中。 在 next 和 prev 的函数中，该变量由下一个/上一个链接元素填充。如果没有这样的元素，它将成为第一个或最后一个元素。
根据您想要对图库执行的操作，也许您还可以使图像淡出/淡入或预加载大图像。
关于javascript - 在图库中的图像之间切换？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26606179/