我正在我的网站（项目）上创建一个图库页面，我放了<a target="_blank"，但我不喜欢它：P。所以我记得在某些网站上有类似弹出窗口的图片，当你点击图片的左侧或右侧时，它会滑动到下一张或上一张图片。解释它的最佳方式是向您展示LINK。提前谢谢。
编辑点击皮肤下的图片！
body {
background-image: url("https://s-media-cache-ak0.pinimg.com/originals/e4/98/1a/e4981a3dd4aa2fa6f0bc84cde9087c7a.jpg");
background-attachment: fixed;
box-sizing: border-box;
margin-left: 20px;
margin-right: 20px;
margin-top: 0px;
margin-bottom: 0px;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-right: solid rgb(200, 101, 103);
border-left: solid rgb(200, 101, 103);
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
#header {
height: 50px;
box-sizing: border-box;
width: auto;
}
#navigacija {
right: 20px;
left: 20px;
height: 50px;
overflow: hidden;
text-align: right;
background-color: #089DE3;
z-index: 9999;
box-sizing: border-box;
border-radius: 25px;
position: fixed;
border-top: solid rgb(200, 101, 103);
border-bottom: solid rgb(200, 101, 103);
}
.navitem {
background: #089DE3;
color: white;
line-height: 50px;
font-size: 30px;
font-family: "Fjalla One";
display: inline-block;
padding-left: 50px;
padding-right: 50px;
box-sizing: border-box;
}
.home:hover {
background: #00C5CD;
box-sizing: border-box;
}
.gallery:hover {
background: #00C5CD;
box-sizing: border-box;
}
.contact:hover {
box-sizing: border-box;
background: #00C5CD;
}
.info:hover {
box-sizing: border-box;
background: #00C5CD;
}
.active {
background-color: #00C5CD;
box-sizing: border-box;
}
h1 {
text-align: center;
font-family: "Jockey One";
font-size: 100px;
color: white;
}
div.galerija {
margin-left: 10px;
margin-right:32px;
margin-bottom:10px;
border: 1px solid rgb(200, 101, 103);
float: left;
width: 300px;
}
div.galerija:hover {
border: 1px solid white;
}
div.desc {
padding: 10px;
text-align: center;
color: black;
background-color: white;
font-size: 20px;
font-family:"Jockey One";
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GALLERY</title>
<link rel="stylesheet" href="Gallery.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Jockey+One" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Allerta+Stencil" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="navigacija">
<a href="Home.html">
<div class="navitem home"><strong>HOME</strong></div>
</a>
<a href="Gallery.html">
<div class="navitem gallery active"><strong>GALLERY</strong></div></a>
<a href="#"></a>
<div class="navitem contact"><strong>CONTACT</strong></div>
<a href="#"></a>
<div class="navitem info"><strong>INFO</strong></div>
</div>
</div>
<h1><strong>GALLERY</strong></h1>
<div class="galerija">
<a target="_blank" href="http://www.downvids.net/video/bestimages/img-aatrox-the-darkin-blade-196.jpg">
<img src="http://www.downvids.net/video/bestimages/img-aatrox-the-darkin-blade-196.jpg" alt="Aatrox" width="300" height="200">
</a>
<div class="desc">Aatrox, the Darkin Blade</div>
</div>
<div class="galerija">
<a target="_blank" href="https://i.ytimg.com/vi/xE4e_cLMgjU/maxresdefault.jpg">
<img src="https://i.ytimg.com/vi/xE4e_cLMgjU/maxresdefault.jpg" alt="Ahri" width="300" height="200"></a>
<div class="desc">Ahri, the Nine-Tailed Fox</div>
</div>
<div class="galerija">
<a target="_blank" href= "https://cdn.tryhardgopro.com/static/ddragon/cdn/img/champion/splash/Akali_0.jpg ">
<img src="https://cdn.tryhardgopro.com/static/ddragon/cdn/img/champion/splash/Akali_0.jpg " alt="Akali" width="300" height="200"></a>
<div class="desc">Akali, the Fist of Shadow</div>
</div>
<div class="galerija">
<a target="_blank" href="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Alistar_0.jpg">
<img src="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Alistar_0.jpg" alt="Alistar" width="300" height="200"></a>
<div class="desc">Alistar, the Minotaur</div>
</div>
<div class="galerija">
<a target="_blank" href="https://cdn.tryhardgopro.com/static/ddragon/cdn/img/champion/splash/Amumu_0.jpg">
<img src="https://cdn.tryhardgopro.com/static/ddragon/cdn/img/champion/splash/Amumu_0.jpg" alt="Amumu" width="300" height="200"></a>
<div class="desc">Amumu, the Sad Mummy</div>
</div>
<div class="galerija">
<a target="_blank" href="http://static.lolskill.net/img/skins/1215/anivia_0.jpg">
<img src="http://static.lolskill.net/img/skins/1215/anivia_0.jpg " alt="Anivia" width="300" height="200"></a>
<div class="desc">Anivia, the Cryophoenix</div>
</div>
<div class="galerija">
<a target="_blank" href="http://media-titanium.cursecdn.com/loldiffs/AirClientDiff_1_28_2013_2_28_PM/images/Annie_Splash_0.jpg">
<img src="http://media-titanium.cursecdn.com/loldiffs/AirClientDiff_1_28_2013_2_28_PM/images/Annie_Splash_0.jpg" alt="Annie" width="300" height="200"></a>
<div class="desc">Annie, the Dark Child</div>
</div>
<div class="galerija">
<a target="_blank" href="http://images2.wikia.nocookie.net/__cb20101005190542/leagueoflegends/images/c/c0/Ashe_OriginalSkin.jpg">
<img src="http://images2.wikia.nocookie.net/__cb20101005190542/leagueoflegends/images/c/c0/Ashe_OriginalSkin.jpg" alt="Ashe" width="300" height="200"></a>
<div class="desc">Ashe, the Frost Archer</div>
</div>
<div class="galerija">
<a target="_blank" href="http://s.lolstatic.com/site/mount-targon/079694fdf251b5e7de788d9ab439d401d31ae160/img/champions/aurelion-sol/aurelion-sol-splash-fallback.jpg">
<img src="http://s.lolstatic.com/site/mount-targon/079694fdf251b5e7de788d9ab439d401d31ae160/img/champions/aurelion-sol/aurelion-sol-splash-fallback.jpg" alt="Aurelion Sol" width="300" height="200"></a>
<div class="desc">Aurelion Sol, the Star Forger</div>
</div>
<div class="galerija">
<a target="_blank" href="https://assets.vg247.com/current//2015/09/league_of_legnds_azir.jpg">
<img src="https://assets.vg247.com/current//2015/09/league_of_legnds_azir.jpg" alt="Azir" width="300" height="200"></a>
<div class="desc">Azir, the Emperor of the Sands</div>
</div>
<div class="galerija">
<a target="_blank" href="http://news.cdn.leagueoflegends.com/public/images/pages/2015/breveal/img/Bard_Splash_WP.jpg">
<img src="http://news.cdn.leagueoflegends.com/public/images/pages/2015/breveal/img/Bard_Splash_WP.jpg" alt="Bard" width="300" height="200"></a>
<div class="desc">Bard, the Wandering Caretaker</div>
</div>
<div class="galerija">
<a target="_blank" href="http://static.lolskill.net/img/skins/1215/blitzcrank_0.jpg">
<img src="http://static.lolskill.net/img/skins/1215/blitzcrank_0.jpg" alt="Blitzcrank" width="300" height="200"></a>
<div class="desc">Blitzcrank, the Great Steam Golem</div>
</div>
<div class="galerija">
<a target="_blank" href="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Brand_0.jpg">
<img src="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Brand_0.jpg" alt="Brand" width="300" height="200"></a>
<div class="desc">Brand, the Burning Vengeance</div>
</div>
<div class="galerija">
<a target="_blank" href="http://na.leagueoflegends.com/sites/default/files/styles/scale_xlarge/public/upload/b-splash.jpg?itok=vJzNVWjn">
<img src="http://na.leagueoflegends.com/sites/default/files/styles/scale_xlarge/public/upload/b-splash.jpg?itok=vJzNVWjn" alt="Braum" width="300" height="200"></a>
<div class="desc">Braum, the Heart of the Freljord</div>
</div>
<div class="galerija">
<a target="_blank" href="https://img.clipartfox.com/5633c6d56bed03beb9292dd8c7f26199_-league-of-legends-and-caitlyn-league-of-legends-clipart_1215-717.jpeg">
<img src="https://img.clipartfox.com/5633c6d56bed03beb9292dd8c7f26199_-league-of-legends-and-caitlyn-league-of-legends-clipart_1215-717.jpeg" alt="Caitlyn" width="300" height="200"></a>
<div class="desc">Caitlyn, the Sheriff of Piltover</div>
</div>
<div class="galerija">
<a target="_blank" href="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Camille_0.jpg">
<img src="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Camille_0.jpg" alt="Camille" width="300" height="200"></a>
<div class="desc">Camille, the Steel Shadow</div>
</div>
</body>
</html>
答案 0 :(得分：0)
您需要搜索灯箱库 JavaScript插件。其中很多都是。
您提供的示例中使用的名称为 Colorbox 。您可以在此处找到有关它的更多信息：http://www.jacklmoore.com/colorbox/
Colorbox基于jQuery库，因此您需要使用booth。
如果您只需要图库并且不想使用jQuery，可以试试 jsLightbox http://jslightbox.felixhagspiel.de/这是一个基于纯JavaScript的图库。
答案 1 :(得分：0)
这是一个粗略但功能性的图片库示例，它以模态弹出：
var images = $('.slideshow img');
var numImages = $('.slideshow img').length - 1;
var modalButton = $('.modal-button');
var prev = $('.prev');
var next = $('.next');
var num = 0;
modalButton.on('click', function() {
$('.slideshow').toggleClass('active');
})
prev.on('click', function() {
images.removeClass('active');
num--;
if (num < 0) {
num = numImages;
}
images.eq(num).addClass('active');
});
next.on('click', function() {
images.removeClass('active');
num++;
if (num > numImages) {
num = 0;
}
images.eq(num).addClass('active');
});* {
box-sizing: border-box;
}
.content {
width: 100%;
max-width: 1024px;
min-height: 100vh;
margin: 0 auto;
position: relative;
text-align: center;
background-color: gray;
}
.modal-button {
padding: 10px;
position: relative;
border: 2px solid green;
background-color: #fff;
z-index: 3;
}
.modal-button:hover {
cursor: pointer;
}
.slideshow {
display: none;
flex-direction: column;
justify-content: center;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
z-index: 2;
}
.slideshow.active {
display: flex;
}
.image-container {
margin: 0 auto;
}
.image-container img {
display: none;
}
.image-container img.active {
display: inline;
}
.slideshow-controls {
width: 350px;
margin: 0 auto;
padding: 20px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
text-align: center;
background-color: tomato;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="content">
<a class="modal-button">Click here to toggle slideshow</a>
<section class="slideshow">
<div class="image-container">
<img class="active" src="http://placehold.it/350x350/000/bae">
<img src="http://placehold.it/250x150/fff/58b">
<img src="http://placehold.it/350x200/333/aeb">
<img src="http://placehold.it/400x150/666/33c">
</div>
<div class="slideshow-controls">
<button class="prev">Prev</button>
<button class="next">Next</button>
</div>
</section>
</section>