Layui를 사용하여 이미지 흐림 및 흑백 효과를 얻는 방법

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css">
<script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.js"></script>

<img class="lay-photo" data-src="path/to/image.jpg" src="path/to/image.jpg" alt="图片">

<script>
layui.use(['layer'], function () {
  var layer = layui.layer;
  
  layer.photos({
    photos: '.lay-photo',
    anim: 5, // 设置弹出浮层的动画效果
    shadeClose: true, // 点击遮罩关闭浮层
    done: function (layero, index, data) {
      // 实现图片的模糊效果
      var img = layero.find('.layui-layer-content img');
      img.css({
        'filter': 'blur(5px)' // 设置图片模糊度
      });
    }
  });
});
</script>

<div class="layui-carousel" lay-indicator="inside" lay-arrow="always">
  <div carousel-item>
    <div><img  lay-src="path/to/image1.jpg" alt="Layui를 사용하여 이미지 흐림 및 흑백 효과를 얻는 방법" ></div>
    <div><img  lay-src="path/to/image2.jpg" alt="Layui를 사용하여 이미지 흐림 및 흑백 효과를 얻는 방법" ></div>
    <div><img  lay-src="path/to/image3.jpg" alt="Layui를 사용하여 이미지 흐림 및 흑백 효과를 얻는 방법" ></div>
  </div>
</div>

<script>
layui.use(['carousel'], function () {
  var carousel = layui.carousel;
  
  carousel.render({
    elem: '.layui-carousel',
    anim: 'fade',
    width: '800px',
    height: '400px',
    arrow: 'always',
    indicator: 'inside',
    autoplay: true,
    interval: 3000,
    done: function (index, elem, obj) {
      // 实现图片的黑白效果
      var imgs = elem.find('img');
      imgs.css({
        'filter': 'grayscale(100%)' // 设置图片为黑白效果
      });
    }
  });
});
</script>