用layui写一个点击缩略图,可以全屏显示相应图片,全屏后可以切换相邻图片

html代码：

<div class="img-list">
  <img src="https://picsum.photos/id/237/200/300" alt="图片1" class="img-item">
  <img src="https://picsum.photos/id/238/200/300" alt="图片2" class="img-item">
  <img src="https://picsum.photos/id/239/200/300" alt="图片3" class="img-item">
</div>

<div class="fullscreen-container">
  <i class="layui-icon layui-icon-close close-btn"></i>
  <img src="" alt="" class="fullscreen-img">
  <i class="layui-icon layui-icon-left prev-btn"></i>
  <i class="layui-icon layui-icon-right next-btn"></i>
</div>

CSS代码：

.img-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.img-item {
  width: 200px;
  height: 300px;
  margin-right: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

.fullscreen-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;
}

.fullscreen-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 90%;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
}

.prev-btn,
.next-btn {
  position: absolute;
  top: 50%;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
}

.prev-btn {
  left: 10px;
}

.next-btn {
  right: 10px;
}

JavaScript代码：

// 点击缩略图打开全屏图片
$('.img-item').on('click', function() {
  var src = $(this).attr('src');
  var index = $('.img-item').index(this);
  $('.fullscreen-img').attr('src', src);
  $('.fullscreen-container').fadeIn();
  $('.prev-btn').data('index', index - 1);
  $('.next-btn').data('index', index + 1);
});

// 关闭全屏图片
$('.close-btn').on('click', function() {
  $('.fullscreen-container').fadeOut();
});

// 切换上一张图片
$('.prev-btn').on('click', function() {
  var index = $(this).data('index');
  if (index >= 0) {
    var src = $('.img-item').eq(index).attr('src');
    $('.fullscreen-img').attr('src', src);
    $(this).data('index', index - 1);
    $('.next-btn').data('index', index + 1);
  }
});

// 切换下一张图片
$('.next-btn').on('click', function() {
  var index = $(this).data('index');
  if (index < $('.img-item').length) {
    var src = $('.img-item').eq(index).attr('src');
    $('.fullscreen-img').attr('src', src);
    $(this).data('index', index + 1);
    $('.prev-btn').data('index', index - 1);
  }
});