jsp动态html模态框图片组切换

页面展示

 css

包括按钮样式以及预览图片尺寸 

   /* 模态框内容 */
        #previewModal img {
            margin: auto;
            display: block;
            width: 100%;
            /*max-width: 800px;*/
            max-height: 100%;
            object-fit: contain;
            /*margin-top: 50px;*/
        }
        /* 关闭按钮 */
        #closeBtn {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
            cursor: pointer;
        }

        #closeBtn:hover,
        #closeBtn:focus {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
        }

        /* 切换按钮 */
        #prevBtn, #nextBtn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
            cursor: pointer;
        }
        #prevBtn {
            left: 25px;
        }

        #nextBtn {
            right: 25px;
        }

        #prevBtn:hover,
        #nextBtn:hover {
            color: #bbb;
        }

js动态生成图片

img部分注意使用class，使用id不唯一会报错

 $("#brandDataContainer").html('');
                let htmlText = '';
                brands.data.forEach(brand => {
                    htmlText += '<div class="brand-item">';
                    htmlText += '    <div class="brand-item-info">';
                    htmlText += '        <div class="viewer"  style="width: 100%;height:100%;">';
                    htmlText += '            <img style="width: 100%;height:100%;" src="' + brands.logoBaseUrl + brand.imageUrl + '" data-original="' + brands.logoBaseUrl + brand.imageUrl + '" alt=""/>';
                    htmlText += '        </div>';
                });
          
                $("#brandDataContainer").html(htmlText);

js模态框获取图片

                // 获取所有图片
                const images = document.querySelectorAll('.viewer img');
                let currentIndex = 0;

                // 显示模态框
                function showModal(index) {
                    currentIndex = index;
                    const modal = document.getElementById('previewModal');
                    const modalImg = document.getElementById('previewImage');
                    modal.style.display = 'block';
                    modalImg.src = images[index].getAttribute('data-original');
                }

                // 关闭模态框
                function closeModal() {
                    const modal = document.getElementById('previewModal');
                    modal.style.display = 'none';
                }

                // 切换到上一张图片
                function showPrevImage() {
                    currentIndex = (currentIndex > 0) ? currentIndex - 1 : images.length - 1;
                    const modalImg = document.getElementById('previewImage');
                    modalImg.src = images[currentIndex].getAttribute('data-original');
                }
                // 切换到下一张图片
                function showNextImage() {
                    currentIndex = (currentIndex < images.length - 1) ? currentIndex + 1 : 0;
                    const modalImg = document.getElementById('previewImage');
                    modalImg.src = images[currentIndex].getAttribute('data-original');
                }
                // 绑定点击事件
                images.forEach((img, index) => {
                    img.addEventListener('click', function(event) {
                        event.preventDefault();
                        showModal(index);
                    });
                });

                // 绑定关闭按钮
                document.getElementById('closeBtn').addEventListener('click', closeModal);

                // 绑定切换按钮
                document.getElementById('prevBtn').addEventListener('click', showPrevImage);
                document.getElementById('nextBtn').addEventListener('click', showNextImage);

                // 绑定点击模态框外部关闭
                window.addEventListener('click', function(event) {
                    if (event.target === document.getElementById('previewModal')) {
                        closeModal();
                    }
                });

如果用viewer.js，用容器初始化

   $("#brandDataContainer").viewer({
                    url: 'data-original',(跟图片的data-original属性是对应的)
                    title: false,
                    // navbar: false
                });