如图，这样的图片浏览器怎么做啊，我前端很菜，玩不动，求大牛帮帮忙！！

Swiperjs，你这个就是图片轮播

怎么用H5实现这样一个悬浮的图片浏览器呢？

因为我是在MUI中使用这个功能，然后我就直接将MUI的popover和slider结合了一下来实现了功能
效果如下：
图片描述
代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello MUI</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <!--标准mui.css-->
        <link rel="stylesheet" href="css/mui.min.css">
        <script src="js/jquery.min.js"></script>
        <style type="text/css">
            .mui-popover-arrow {
                display: none;
            }
            
            #PopoverPicContainer {
                top: calc(50% - 125px) !important;
            }
            .mui-slider-indicator .mui-icon {
    border: 0;
}
        </style>
    </head>
    <body>
        <a id="poppicContainer" href="#PopoverPicContainer" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">弹出图片预览幻灯片</a>
        <div id="PopoverPicContainer" class="mui-popover" style="height: 250px;">
            <div class="mui-slider" style="margin-top: calc(50% - 105px);">
                <div class="mui-slider-group mui-slider-loop" style="text-align: center;">
                    <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一个图文表格) -->
                    <div class="mui-slider-item mui-slider-item-duplicate">
                        <ul class="mui-table-view mui-grid-view">
                            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                                <a href="#"><img class="mui-media-object" src="images/cbd.jpg">
                                    <div class="mui-media-body">Color of SIP CBD</div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="mui-slider-item">
                        <ul class="mui-table-view mui-grid-view">
                            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                                <a href="#"><img class="mui-media-object" src="images/shuijiao.jpg">
                                    <div class="mui-media-body">幸福就是可以一起睡觉</div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="mui-slider-item">
                        <ul class="mui-table-view mui-grid-view">
                            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                                <a href="#"><img class="mui-media-object" src="images/cbd.jpg">
                                    <div class="mui-media-body">Color of SIP CBD</div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一个图文表格) -->
                    <div class="mui-slider-item mui-slider-item-duplicate">
                        <ul class="mui-table-view mui-grid-view">
                            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                                <a href="#"><img class="mui-media-object" src="images/shuijiao.jpg">
                                    <div class="mui-media-body">幸福就是可以一起睡觉</div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="mui-slider-indicator" style="position: static;background-color: #fff;">
                    <span class="mui-action mui-action-previous mui-icon mui-icon-back" style="float: left ;"></span>
                    <div class="mui-number">
                        <span>1</span> / 2
                    </div>
                    <span class="mui-action mui-action-next mui-icon mui-icon-forward" style="float: right;"></span>
                </div>
            </div>
        </div>
    </body>
    <script src="js/mui.min.js"></script>
    <script>
        mui.init();
        mui("body").on("tap","#poppicContainer",function(){
            $("#PopoverPicContainer").css("top","calc(50% - 125px) !important");
        });
    </script>
</html>

怎么用H5实现这样一个悬浮的图片浏览器呢？

你尚未登录，登录后可以

想在H5项目，Vue3中实现扫一扫的功能，怎么实现比较好？

快开发完的Vue3项目要做SEO该如何处理？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

如何实现类似豆包的AI改写框跟随内容滚动效果？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？