js+css实现横向滚动图片列表相册效果代码-html代码-BFW代码库

代码语言：html

代码描述：js+css实现横向滚动图片列表相册效果代码，可点击单个图片放大。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.5.1.css">
  
<style>
body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #111;
  overflow: hidden;
  position: relative;
}
.gallery {
  display: flex;
  align-items: center;
  overflow-y: hidden;
  overflow-x: scroll;
  width: 100%;
  mask-image: radial-gradient(circle, #000 10%, rgba(0,0,0,0.025) 100%);
  height: 200px;
  z-index: 0;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}
.gallery::-webkit-scrollbar {
  display: none;
}
.gallery img {
  width: 100%;
  max-width: 400px;
  height: auto;
  margin-right: 5px;
}
.left {
  left: 85px;
}
.right {
  right: 85px;
}
.left,
.right {
  position: absolute;
  height: 100px;
  font-size: 96px;
  color: rgba(255,255,255,0);
  z-index: 99;
  background-color: rgba(255,255,255,0.1);
  background-clip: text;
  backdrop-filter: blur(2px);
  -webkit-text-stroke: 1px #fff;
}
</style>


  
  
</head>

<body translate="no">
  <a class="left" href="#"><i class="fa-solid fa-chevron-left"></i></a><a class="right" href="#"><i class="fa-solid fa-chevron-right"></i></a>
<div class="gallery">
  <img id="pic1" src="https://picsum.photos/300/200?random=0" />
  <img id="pic2" src="https://picsum.photos/300/200?random=1" />
  <img id="pic3" src="https://picsum.photos/300/200?random=2" />
  <img id="pic4" src="https://picsum.photos/300/200?random=3" />
  <img id="pic5" src="https://picsum.photos/300/200?random=4" />
  <img id="pic6" src="https://picsum.photos/300/200?random=5" />
  <img id="pic7" src="https://picsum.photos/300/200?random=6" />
  <img id="pic8" src="https://picsum.photos/300/200?random=7" />
  <img id="pic9" src="https://picsum.photos/300/200?random=8" />
  <img id="pic10" src="https://picsum.photos/300/200?random=9" />
  <img id="pic11" src="https://picsum.photos/300/200?random=10" />
  <img id="pic12" src="https://picsum.photos/300/200?random=11" />
  <img id="pic13" src="https://picsum.photos/300/200?random=12" />
  <img id="pic14" src="https://picsum.photos/300/200?random=13" />
  <img id="pic15" src="https://picsum.photos/300/200?random=14" />
  <img id="pic16" src="https://picsum.photos/300/200?random=15" />
  <img id="pic17" src="https://picsum.photos/300/200?random=16" />
  <img id="pic18" src="https://picsum.photos/300/200?random=17" />
  <img id="pic19" src="https://picsum.photos/300/200?random=18" />
  <img id="pic20" src="https://picsum.photos/300/200?random=19" />
  <img id="pic21" src="https://picsum.photos/300/200?random=20" />
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/exif.min.js"></script>
      <script  >
document.addEventListener("DOMContentLoaded", () => {
  const arrows = document.querySelectorAll('a');
  const gallery = document.querySelector('.gallery');
  const images = Array.from(gallery.querySelectorAll('img'));

  // Function to duplicate images at the beginning and end
  function duplicateImages() {
    images.forEach(img => {
      const cloneStart = img.cloneNode(true);
      const cloneEnd = img.cloneNode(true);
      gallery.insertBefore(cloneStart, gallery.firstChild);
      gallery.appendChild(cloneEnd);
    });
  }

  // Initialize images
  duplicateImages();

  let scrollInterval;
  const scrollSpeed = 20;

  // Function to start scrolling
  function startScrolling(direction) {
    stopScrolling(); // Clear any existing intervals
    scrollInterval = setInterval(() => {
      const lastOriginalImage = images[images.length - 1];
      const lastDuplicateImage = gallery.lastChild;

      gallery.scrollLeft += direction * scrollS.........完整代码请登录后点击上方下载按钮下载查看