JavaScript Lightbox

本文我们为大家介绍如何使用 HTML、JavaScript 与 CSS 来创建 Lightbox,类似相册预览功能。

HTML 代码:


h2 style=text-align:center>Lightboxh2>

div class=row>
div class=column>
img src=http://static.runoob.com/images/demo/demo1.jpg style=width:100% onclick=openModal();currentSlide(1) class=hover-shadow cursor>
div>
div class=column>
img src=http://static.runoob.com/images/demo/demo2.jpg style=width:100% onclick=openModal();currentSlide(2) class=hover-shadow cursor>
div>
div class=column>
img src=http://static.runoob.com/images/demo/demo3.jpg style=width:100% onclick=openModal();currentSlide(3) class=hover-shadow cursor>
div>
div class=column>
img src=http://static.runoob.com/images/demo/demo4.jpg style=width:100% onclick=openModal();currentSlide(4) class=hover-shadow cursor>
div>
div>

div id=myModal class=modal>
span class=close cursor onclick=closeModal()>×span>
div class=modal-content>

div class=mySlides>
div class=numbertext>1 / 4div>
img src=http://static.runoob.com/images/demo/demo1.jpg style=width:100%>
div>

div class=mySlides>
div class=numbertext>2 / 4div>
img src=http://static.runoob.com/images/demo/demo2.jpg style=width:100%>
div>

div class=mySlides>
div class=numbertext>3 / 4div>
img src=http://static.runoob.com/images/demo/demo3.jpg style=width:100%>
div>

div class=mySlides>
div class=numbertext>4 / 4div>
img src=http://static.runoob.com/images/demo/demo4.jpg style=width:100%>
div>

a class=prev onclick=plusSlides(-1)>a>
a class=next onclick=plusSlides(1)>a>

div class=caption-container>
p id=caption>p>
div>

div class=column>
img class=demo cursor src=http://static.runoob.com/images/demo/demo1.jpg style=width:100% onclick=currentSlide(1) alt=Nature and sunrise>
div>
div class=column>
img class=demo cursor src=http://static.runoob.com/images/demo/demo2.jpg style=width:100% onclick=currentSlide(2) alt=Trolltunga, Norway>
div>
div class=column>
img class=demo cursor src=http://static.runoob.com/images/demo/demo3.jpg style=width:100% onclick=currentSlide(3) alt=Mountains and fjords>
div>
div class=column>
img class=demo cursor src=http://static.runoob.com/images/demo/demo4.jpg style=width:100% onclick=currentSlide(4) alt=Northern Lights>
div>
div>
div>

CSS 代码:

body {
font-family: Verdana, sans-serif;
margin: 0;
}

* {
box-sizing: border-box;
}

.row > .column {
padding: 0 8px;
}

.row:after {
content: “”;
display: table;
clear: both;
}

.column {
float: left;
width: 25%;
}

/* 弹窗背景 */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}

/* 弹窗内容 */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}

/* 关闭按钮 */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}

.mySlides {
display: none;
}

.cursor {
cursor: pointer
}

/* 上一页 & 下一页 按钮 */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top:50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
webkit-user-select: none;
}

/* 定位下一页按钮到右侧 */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}

/* 鼠标移动上去修改背景色为黑色 */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}

/* 页数(1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

img {
margin-bottom:4px;
}

.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}

.demo {
opacity: 0.6;
}

.active,
.demo:hover {
opacity: 1;
}

img.hover-shadow {
transition: 0.3s
}

.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

JavaScript 代码:

function openModal() {
document.getElementById(myModal).style.display = block;
}

function closeModal() {
document.getElementById(myModal).style.display = none;
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName(mySlides);
var dots = document.getElementsByClassName(demo);
var captionText = document.getElementById(caption);
if (n > slides.length) {slideIndex = 1}
if (n 1) {slideIndex = slides.length}
for (i = 0; i slides.length; i++) {
slides[i].style.display = none;
}
for (i = 0; i dots.length; i++) {
dots[i].className = dots[i].className.replace( active, );
}
slides[slideIndex1].style.display = block;
dots[slideIndex1].className += active;
captionText.innerHTML = dots[slideIndex1].alt;
}

在线演示

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
  1. 免费下载或者VIP会员资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
  2. 提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或联络我们。
  3. 找不到素材资源介绍文章里的示例图片?
    对于会员专享、整站源码、程序插件、网站模板、网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
  4. 付款后无法显示下载地址或者无法查看内容?
    如果您已经成功付款但是网站没有弹出成功提示,请联系站长提供付款信息为您处理
  5. 购买该资源后,可以退款吗?
    源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。请您在购买获取之前确认好 是您所需要的资源

评论(0)

提示:请文明发言