【免费】资源推荐原生JS代码实现：图片滚动+lightbox源码资源-CSDN文库

共14个文件

png：7个

jpg：5个

html：1个

javascript

图片滚动

lightbox

需积分: 0 19 浏览量更新于2024-06-26 收藏 5.18MB ZIP 举报

使用场景：本资源是用原生js实现的相册代码（包括图片滚动展示和lightbox大图查看功能），代码非常简洁。适用于需要在文章页或相册页分组展示照片的页面。资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、不使用JQ框架。适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。提示：---------------------------------------------------------------------------------------------------------------- 压缩包资源内包含：效果图，源码文件，jq库文件。无不良广告和病毒，可放心下载使用。

收起资源包目录

原生JS代码实现：图片滚动+lightbox.zip （14个子文件）

原生JS代码实现：图片滚动+lightbox

原生JS代码实现：图片滚动+lightbox.html 8KB

原生JS代码实现：图片滚动+lightbox.gif 3.27MB

images

left-arrow.png 679B

0003.png 446KB

0011.jpg 49KB

0012.jpg 265KB

0014.jpg 46KB

0001.png 390KB

0002.png 211KB

right-arrow.png 664B

0013.jpg 33KB

0005.png 253KB

0010.jpg 43KB

0004.png 231KB

身份认证购VIP最低享 7 折!

30元优惠券

资源推荐

资源预览

资源评论

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原生JS代码实现：图片滚动+lightbox</title> </head> <body> <style type="text/css"> .lightbox { display: none; position: fixed; z-index: 999; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9); } .lightbox-content{ position: fixed; z-index: 9999; padding-top: 10px; left: 50%; top: 50%; transform: translate(-50%, -50%); } .lightbox-content img{ max-height: 600px; max-width: 100%; margin:auto; background-color: #fff; border:15px solid #fff; border-bottom:60px solid #fff; } .lightbox-alt{ position: absolute; width: 100%; bottom:25px; text-align: center; font-size: 1.2rem; font-weight: 700; color: #333; } .lightbox-before,.lightbox-after{ position: absolute; width: 78px; height: 100px; display: block; top:40%; filter: grayscale(70%) blur(0.5px); /* 调整数值来改变模糊程度 */ opacity: 0.3; cursor: pointer; } .lightbox-before{ left:0px; background: url("images/left-arrow.png") left bottom no-repeat; border-radius: 0px 15px 15px 0px; } .lightbox-after{ right:0px; background: url("images/right-arrow.png") left bottom no-repeat; border-radius: 15px 0px 0px 15px ; } .lightbox-before:hover, .lightbox-after:hover{ opacity: 0.9; -webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */ filter: grayscale(0%); filter: blur(0px); /* 调整数值来改变模糊程度 */ } .lightbox-close { position: absolute; top: 10px; right: 25px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .lightbox-close:hover, .lightbox-close:focus { color: #bbb; text-decoration: none; cursor: pointer; } .box{ width: 1156px; height: 160px; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); } #container{ margin: 0 auto; width: 1076px; height: 100%; overflow: hidden; } .slider{ height: 160px; display: flex; } .slider img { width: 280px; height: auto; filter: grayscale(70%) blur(0.5px); /* 调整数值来改变模糊程度 */ margin: 0px; cursor: pointer; transition: all .5s; } .slider img:hover{ filter: grayscale(0%) blur(0px); /* 调整数值来改变模糊程度 */ transition: all .5s; } .leftbtn,.rightbtn{ position: absolute; width: 21px; height: 160px; display: block; background-color: rgba(0, 0, 0, 0.1); color:#fff; top:0; cursor: pointer; transition: all .5s; } .leftbtn{ left: 19px; border-radius: 10px 0 0 10px; } .rightbtn{ right:19px; border-radius: 0px 10px 10px 0px; } .leftbtn:hover,.rightbtn:hover{ background-color: rgba(140, 140, 140, 0.7); transition: all .5s; } .leftbtn::after, .rightbtn::after{ display: block; content: ''; border-width: 8px; border-style: solid; position: absolute; top: 71px; transition: all .5s; } .leftbtn::after{ border-color: transparent #999 transparent transparent ; right: 6px; } .rightbtn::after{ border-color: transparent transparent transparent #999 ; left: 6px; } .leftbtn:hover::after{ border-color: transparent #fff transparent transparent ; transition: all .5s; } .rightbtn:hover::after{ border-color: transparent transparent transparent #fff ; transition: all .5s; } </style> <div id="myLightbox" class="lightbox"> <span class="lightbox-close">×</span> <span class="lightbox-before"></span> <span class="lightbox-after"></span> <div class="lightbox-content"> <img> <div id="imgAlt" class="lightbox-alt"></div> </div> </div> <div class="box"> <div id="container" > <div id="slider" class="slider" > <img src="images/0001.png" alt="纱帐香飘兰麝，娥眉轻把萧吹" onclick="openLightbox(this);"> <img src="images/0002.png" alt="清风不识字，何故乱翻书？" onclick="openLightbox(this);"> <img src="images/0003.png" alt="好雨知时节，当春乃发生。" onclick="openLightbox(this)"> <img src="images/0004.png" alt="花径不曾缘客扫，蓬门今始为君开。" onclick="openLightbox(this)"> <img src="images/0005.png" alt="锄禾日当午，汗滴禾下土" onclick="openLightbox(this)"> <img src="images/0014.jpg" alt="晓看天色暮看云，行也思君，坐也思君" onclick="openLightbox(this)"> <img src="images/0010.jpg" alt="鸳鸯被里成双夜，一树梨花压海棠。" onclick="openLightbox(this)"> <img src="images/0011.jpg" alt="衣带渐宽终不悔，为伊消得人憔悴。" onclick="openLightbox(this)"> <img src="images/0012.jpg" alt="侍儿扶起娇无力，始是新承恩泽时。" onclick="openLightbox(this)"> <img src="images/0013.jpg" alt="我与你生同一个衾，死同一个椁" onclick="openLightbox(this)">  </div> </div> <div id="leftBtn" class="leftbtn"></div> <div id="rightBtn" class="rightbtn"></div> </div> </body> <script type="text/javascript"> // 图片滚动和控制 const container = document.getElementById('container'); const slider = document.getElementById('slider'); const leftBtn = document.getElementById('leftBtn'); const rightBtn = document.getElementById('rightBtn'); let offset = 0; rightBtn.addEventListener('click', function() { offset += 200 * 4; // 每次右移三张图片 container.scrollBy({ left: 200 * 4, behavior: 'smooth' }); }); leftBtn.addEventListener('click', function() { offset -= 200 * 4; // 每次左移三张图片 container.scrollBy({ left: -200 * 4, behavior: 'smooth' }); }); container.addEventListener('scroll', function() { const scrollLeft = container.scrollLeft; if (scrollLeft !== offset) { offset = scrollLeft; } }); // lightbox let currentImageIndex = 0; let allImages = document.querySelectorAll('img[onclick]'); function openLightbox(imgElement) { // Show the lightbox document.getElementById('myLightbox').style.display = "block"; // Get the lightbox content and set the image const lightboxContent = document.querySelector('.lightbox-content img'); lightboxContent.src = imgElement.src; lightboxContent.alt = imgElement.alt; document.getElementById('imgAlt').innerHTML = lightboxContent.alt; // Get the index of the image that was clicked currentImageIndex = Array.prototype.indexOf.call(allImages, imgElement); } // Close the lightbox function closeLightbox() { document.getElementById('myLightbox').style.display = "none"; } // Show the next image function showNext() { if (currentImageIndex < allImages.length - 1) { openLightbox(allImages[currentImageIndex + 1]); } } // Show the previous image function showPrevious() { if (currentImageIndex > 0) { openLightbox(allImages[currentImageIndex - 1]); } } // Listen for clicks on the close button document.querySelector('.lightbox-close').addEventListener('click', function() { closeLightbox(); }); document.querySelector('.lightbox-before').addEventListener('click', function() { showPrevious(); }); document.querySelector('.lightbox-after').addEventListener('click', function() { showNext(); }); // Listen for keyboard events when lightbox is open document.addEventListener('keydown', function(event) { if (document.getElementById('myLightbox').style.display === 'block') { if (event.key === 'ArrowLeft') { showPrevious(); } else if (eve