Question

我试图在用户屏幕上显示图片时触发事件。屏幕上显示的图像来自幻灯片显示，当每个图像出现时，我希望文本在可见图像上方淡入淡出。

我使用了if（$（＆＃39;＃element＆＃39;）。是（＆＃39;：visible＆＃39;）语法，这对第一张幻灯片运行良好，但它不适用于我已经在网上找到了答案，但不幸的是没有具体的答案。

            <script>

            var slideIndex = 1; 

            var t;

            showSlides(slideIndex);

               function plusSlides(n) {

                 slideIndex = slideIndex + n;
                 clearTimeout(t);
                 showSlides(slideIndex);
                 console.log(slideIndex);

            }

               function currentSlide(n) {

               showSlides(slideIndex = n);

            }

               function showSlides(n) {

               var i;

               var slides = document.getElementsByClassName("mySlides");

                    if (n==undefined){n = ++slideIndex}

                    if (n > slides.length) {slideIndex = 1}

                    if (n < 1) {slideIndex = slides.length}

                    for (i = 0; i < slides.length; i++) {

                          slides[i].style.display = "none";

              }

              slides[slideIndex-1].style.display = "block";

             t=setTimeout(showSlides, 7500)

           };


            if($('#slide1').is(':visible')) {

              $("#fadeTxt1S1").delay(1000).fadeIn(3000);

              $("#fadeTxt2S1").delay(3000).fadeIn(3000);

            };

            if($('#slide2').is(':visible')) {

              $("#fadeTxt1S2").delay(1000).fadeIn(3000);

              $("#fadeTxt2S2").delay(3000).fadeIn(3000);

            };

            </script>

            <html>

            <div class="mySlides fade" id="slide1">

                       <img class="homePageSlides imageCover" src="HomePage/slide3b.jpg">

                       <p id="fadeTxt1S1">"convallis malesuada."</p>

                       <p id="fadeTxt2S1">"tempus convallis "</p>

             </div>


            <div class="mySlides fade" id="slide2">

                       <img class="homePageSlides imageCover" src="HomePage/test2.jpg">

                       <p id="fadeTxt1S2">"amet nisl tempus"</p>

                       <p id="fadeTxt2S2">"tac lectus see"</p>

             </div>

            </html>

Answer 1

这是一个有效的例子。唯一真正的变化是在刚刚发生幻灯片转换时将检查可见性放入代码中。原因是您的检查只在页面加载时发生一次，并且确实需要在转换后运行。其他更改只是整理代码。我还添加了一些css，以便显示淡入淡出效果。

顺便说一下，可能有更好的方法来编码淡入淡出效果。例如，您可以简单地执行类似这样的操作

，而不是检查哪张幻灯片可见

$(slides[slideIndex-1]).find('p').eq(0).delay(1000).fadeIn(3000);
$(slides[slideIndex-1]).find('p').eq(1).delay(3000).fadeIn(3000);

关键是你已经有了想要出现的元素的容器的引用，所以你可以直接引用它们。

var slideIndex = 1;

var t;

showSlides(slideIndex);

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    if (n==undefined){n = ++slideIndex}
    if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    slides[slideIndex-1].style.display = "block";
    if($('#slide1').is(':visible')) {
        $("#fadeTxt1S1").delay(1000).fadeIn(3000);
        $("#fadeTxt2S1").delay(3000).fadeIn(3000);
    };

    if($('#slide2').is(':visible')) {
        $("#fadeTxt1S2").delay(1000).fadeIn(3000);
        $("#fadeTxt2S2").delay(3000).fadeIn(3000);
    };
    t=setTimeout(showSlides, 7500)
};

            .fade, .fade p {
                display:none;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

        <div class="mySlides fade" id="slide1">
            <img class="homePageSlides imageCover" src="HomePage/slide3b.jpg">
            <p id="fadeTxt1S1">"convallis malesuada."</p>
            <p id="fadeTxt2S1">"tempus convallis "</p>
        </div>

        <div class="mySlides fade" id="slide2">
            <img class="homePageSlides imageCover" src="HomePage/test2.jpg">
            <p id="fadeTxt1S2">"amet nisl tempus"</p>
            <p id="fadeTxt2S2">"tac lectus see"</p>
        </div>

尝试使用jQuery在屏幕上显示图像时触发事件

1 个答案: