jQuery 带炫酷轮播图效果的Lightbox弹出层插件 只要一句代码轻松实现功能
程序员文章站
2022-05-28 22:21:14
...
最近在做手机浏览器端的一个功能,就是用过点击图片,然后显示所有图片相册可以切换查看功能。但是自己写的话感觉是很麻烦,今天给他就介绍一款jQuery插件,就一句代码轻松实现,兼容PC、H5端。
1:在页面引入相关JS、样式文件
<link href="css/popup-lightbox.css" rel="stylesheet" />
<link href="css/animate.css" rel="stylesheet" />
<link href="css/demo.css" rel="stylesheet" />
<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.popup.lightbox.js"></script>
1.1 popup-lightbox.css文件
/* Project: Popup Lightbox
* Author: Asif Mughal
* URL: www.codehim.com
* License: MIT License
* Copyright (c) 2019 - Asif Mughal
*/
/* File: popup-lightbox.css */
.lightbox {
position: fixed;
background: rgba(0, 0, 0, 0.90);
display: none;
z-index: 100;
}
.lightbox .img-show {
position: absolute;
height: 100%;
width: 100%;
box-sizing: border-box;
text-align: center;
}
.img-caption {
background: rgba(0, 0, 0, 0.3);
padding: 10px;
position: absolute;
bottom: 0;
display: block;
z-index: 101;
color: #fff;
text-shadow: 1px 0.4px rgba(0, 0, 0, 0.5);
width: 100%;
box-sizing: border-box;
}
.lightbox .btn-close {
position: absolute;
top: 10px;
right: 10px;
width: 32px;
height: 32px;
border: 1px solid #fff;
background: rgba(255, 255, 255, 0.5);
border-radius: 50%;
text-align: center;
font-size: 18pt;
z-index: 101;
cursor: pointer;
}
.lightbox .btn-close:hover {
background: #fff;
}
.lightbox .lightbox-status {
position: absolute;
top: 20px;
left: 20px;
color: #fff;
font-size: 14px;
z-index: 101;
}
.img-show img {
width: 100%;
height: auto;
position: absolute;
display: block;
top: 0;
bottom: 0;
margin: auto;
}
/* Next and Previous Buttons */
.btn-prev,
.btn-next {
width: 32px;
height: 100px;
background: rgba(0, 0, 0, 0.30);
cursor: pointer;
position: absolute;
top: 50%;
margin-top: -50px;
z-index: 101;
border: 0;
font-family: FontAwesome;
color: #fff;
color: rgba(255, 255, 255, 0.6);
font-size: 18pt;
border-radius: 5px;
}
.btn-prev:hover,
.btn-next:hover {
background: rgba(0, 0, 0, 0.7);
color: #fff;
transition: .4s;
-webkit-transition: .4s;
-moz-transition: .4s;
-ms-transition: 0.4s;
-o-transition: .4s;
}
.btn-prev {
left: 5px;
}
.btn-next {
right: 5px;
}
.btn-prev:before {
content: "\f104";
}
.btn-next:before {
content: "\f105";
}
@media only screen and ( min-width: 680px) {
.lightbox {
border-radius: 5px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
}
}
2 该Lightbox弹出层的HTML结构如下。
<div class="img-container">
<img src="images/1.jpg" alt="第一张图片" />
<img src="images/2.jpg" alt="这是第二张"/>
<img src="images/3.jpg" alt="三张"/>
<img src="images/4.jpg" alt="最后一张" />
</div>
3:页面加载完成执行一句代码
$(document).ready(function(){
$(".img-container").popupLightbox();
})
效果图如下:
上一篇: 微信小程序实现常见弹出层效果
下一篇: C++ -- STL文件解析