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

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

javascript jquery html css

Javascript 尝试使用jQuery在屏幕上显示图像时触发事件,javascript,jquery,html,css,Javascript,Jquery,Html,Css,当图像出现在用户屏幕上时，我试图触发一个事件。屏幕上出现的图像来自幻灯片，当每个图像出现时，我希望文本在可见图像的顶部淡入淡出我使用了if（$（“#element”）.is（“：visible”）语法，该语法在第一张幻灯片上运行良好，但在接下来的幻灯片上不起作用。我在网上到处寻找答案，但不幸的是没有具体的答案 <script> var slideIndex = 1; var t;

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

我使用了if（$（“#element”）.is（“：visible”）语法，该语法在第一张幻灯片上运行良好，但在接下来的幻灯片上不起作用。我在网上到处寻找答案，但不幸的是没有具体的答案

            <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>


var slideIndex=1；
变量t；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
slideIndex=slideIndex+n；
清除超时（t）；
放映幻灯片（幻灯片索引）；
console.log（slideIndex）；
}
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
如果（n==未定义）{n=++slideIndex}
如果（n>slides.length）{slideIndex=1}
如果（n<1）{slideIndex=slides.length}
对于（i=0；i“convallis malesuada。”
“临时会议”
“amet nisl tempus”
“tac-lectus-see”

这里有一个工作示例。唯一真正的更改是在幻灯片转换刚刚发生时检查代码的可见性。原因是您的检查只在页面加载时发生一次，并且确实需要在转换后运行。其他更改只是整理代码。我还添加了一些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；
变量t；
放映幻灯片（幻灯片索引）；
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
如果（n==未定义）{n=++slideIndex}
如果（n>slides.length）{slideIndex=1}
如果（n<1）{slideIndex=slides.length}
对于（i=0；i


.fade、.fade p{
显示：无；
}

“convallis malesuada。”
“临时会议”
“amet nisl tempus”
“tac-lectus-see”
什么事件使每个幻灯片出现/消失？可能要做的是将代码放入该事件的侦听器中，您的是（':visuals'）
检查。目前问题的问题在于它没有复制您的问题-代码实际上没有运行，而且几乎可以肯定还有其他相关代码（根据淡入淡出类判断）。我现在添加了JavaScript代码，以显示幻灯片放映是如何实现的。感谢Chris对使用.find而不是（“：Visible”）进行编辑。我可以请您解释一下代码的工作原理吗？我对编码还不熟悉，所以我试着了解一下：）$（幻灯片[slideIndex-1]）
提供对jquery对象的引用，您可以将该对象视为当前幻灯片的代表find（'p'）
返回jquery对象中包含的所有标记的集合<代码>等式（0）
表示“我只关心位置0处的元素”-即第一个元素。所有这些加在一起，返回的内容与您说$（“#fadeTxt1S1”）
或$（“#fadeTxt1S2”）
时得到的内容相同，但它是从容器的上下文执行的。