如何在傳單中添加幻燈片（打字稿）

Question

我在打字稿上使用傳單。

marker.bindPopup(
                `
      <img src='${imgList[0]}'>
      <a href='http://toto.fr/?id=${markerData.id}'>show details</a>
   `
            )
            .openPopup();

我想在對象上循環以在“彈出窗口”中創建圖片幻燈片。 請問你有解決辦法嗎？

謝謝：）

Answer 1

不要使用傳單，因為它用於地圖。 https://dotnetfiddle.net/jKbPOZ您可以使用此視圖：

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index6</title>
    <style>
        .modal {
            width: 800px;
            height: 500px;
        }

        * {
            box-sizing: border-box;
        }

        body {
            font-family: Verdana, sans-serif;
        }
        /*.mySlides {
            display: none;
        }*/
        img {
            vertical-align: middle;
        }
        /* Slideshow container */
        .slideshow-container {
            max-width: 1000px;
            position: relative;
            margin: auto;
        }
        /* Caption text */
        .text {
            color: #f2f2f2;
            font-size: 15px;
            padding: 8px 12px;
            position: absolute;
            bottom: 8px;
            width: 100%;
            text-align: center;
        }
        /* Number text (1/3 etc) */
        .numbertext {
            color: #f2f2f2;
            font-size: 12px;
            padding: 8px 12px;
            position: absolute;
            top: 0;
        }
        /* The dots/bullets/indicators */
        .dot {
            height: 15px;
            width: 15px;
            margin: 0 2px;
            background-color: #bbb;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.6s ease;
        }

        .active {
            background-color: #717171;
        }
        /* Fading animation */
        .fade {
            -webkit-animation-name: fade;
            -webkit-animation-duration: 1.5s;
            animation-name: fade;
            animation-duration: 1.5s;
        }
    </style>
    <!-- Remember to include jQuery :) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <!-- jQuery Modal -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
</head>
<body>
    <!-- Modal HTML embedded directly into document -->
    <div id="ex1" class="modal">
        <h2>Automatic Slideshow</h2>
        <p>Change image every 2 seconds:</p>
        <div class="slideshow-container">
            <div class="mySlides fade">
                <div class="numbertext">1 / 3</div>
                <img src="~/Images/1.png" style="width:100%" />
                <div class="text">Caption Text</div>
            </div>
            <div class="mySlides fade">
                <div class="numbertext">2 / 3</div>
                <img src="~/Images/2.png" style="width:100%" />
                <div class="text">Caption Two</div>
            </div>
            <div class="mySlides fade">
                <div class="numbertext">3 / 3</div>
                <img src="~/Images/3.png" style="width:100%" />
                <div class="text">Caption Three</div>
            </div>
        </div>
        <br>
        <div style="text-align:center">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </div>
        <a href="#" rel="modal:close">Close</a>
    </div>
    <!-- Link to open the modal -->
    <p><a href="#ex1" rel="modal:open">Open Modal</a></p>
    <script>
        var slideIndex = 0;
        showSlides();
        function showSlides() {
            var i;
            var slides = document.getElementsByClassName("mySlides");
            var dots = document.getElementsByClassName("dot");
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            slideIndex++;
            if (slideIndex > slides.length) { slideIndex = 1 }
            for (i = 0; i < dots.length; i++) {
                dots[i].className = dots[i].className.replace(" active", "");
            }
            slides[slideIndex - 1].style.display = "block";
            dots[slideIndex - 1].className += " active";
            setTimeout(showSlides, 2000); // Change image every 2 seconds
        }
    </script>
</body>
</html>

感謝https://jquerymodal.com/和 w3schools

如何在傳單中添加幻燈片（打字稿）

問題描述

1 個解決方案

解決方案1
0 2021-10-26 23:54:41

如何在傳單中添加幻燈片（打字稿）

問題描述

1 個解決方案

解決方案1 0 2021-10-26 23:54:41

解決方案1
0 2021-10-26 23:54:41