希望立即在幻灯片上单击“ Next/prev”按钮在图像上显示文本

，因为当前处于我的幻灯片时，它在自动化时会在特定图像上淡入特定的文本(很好(，但是也也淡出了在按下下一个/prev按钮时。我想要的是将特定的文本显示为特定幻灯片立即，当单击下一个/prev按钮而不褪色时。

。

这是代码，我尝试了几件事，但是什么都没有起作用！如果可以提供代码段以及对语法如何实现其目标的解释，这将是最有帮助的。

  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";
                  $(slides[slideIndex-1]).find('#fadeTxt1S1').fadeIn(3000);
                  $(slides[slideIndex-1]).find('#fadeTxt2S1').fadeIn(3000);
                  $(slides[slideIndex-1]).find('#fadeTxt1S2').fadeIn(3000);
                  $(slides[slideIndex-1]).find('#fadeTxt2S2').fadeIn(3000);
                  $(slides[slideIndex-1]).find('#fadeTxt1S3').fadeIn(3000);
                  $(slides[slideIndex-1]).find('#fadeTxt2S3').fadeIn(3000);
                  t=setTimeout(showSlides, 7500)
            };

     #fadeTxt1S1 {
         display: none;
         color: white;
         position: absolute;
         top: 300px;
         left: 250px;
         font-size: 65px;
         font-family: serif;
         font-style: italic;
         opacity: 0.9;
         text-shadow:  2px 2px #9B51E0;
         }
         #fadeTxt2S1 {
         display: none;
         color: white;
         position: absolute;
         bottom: 470px;
         right: 340px;
         font-size: 65px;
         font-family: serif;
         font-style: italic;
         opacity: 0.9;
         text-shadow:  2px 2px #9B51E0;
         }
         #fadeTxt1S2 {
         display: none;
         color: white;
         position: absolute;
         top: 200px;
         left: 300px;
         font-size: 65px;
         font-family: serif;
         font-style: italic;
         opacity: 0.9;
         text-shadow:  2px 2px #9B51E0;
         }
         #fadeTxt2S2 {
         display: none;
         color: white;
         position: absolute;
         bottom: 610px;
         right: 170px;
         font-size: 65px;
         font-family: serif;
         font-style: italic;
         opacity: 0.9;
         text-shadow:  2px 2px #9B51E0;
         }
         #fadeTxt1S3 {
         display: none;
         color: white;
         position: absolute;
         top: 310px;
         right: 110px;
         font-size: 60px;
         font-family: serif;
         font-style: italic;
         opacity: 0.9;
         text-shadow:  2px 2px #9B51E0;
         }
         #fadeTxt2S3 {
         display: none;
         color: white;
         position: absolute;
         bottom: 510px;
         right: 70px;
         font-size: 60px;
         font-family: serif;
         font-style: italic;
         opacity: 0.9;
         text-shadow:  2px 2px #9B51E0;
         }

<html>

     <div id="slideShowContainer">
                 <div class="mySlides fade">
                           <img class="homePageSlides imageCover" src=HomePage/slide3b.jpg">
                           <p id="fadeTxt1S1">"text1 for slide1"</p>
                           <p id="fadeTxt2S1">"text2 for slide1"</p>
                 </div>

                <div class="mySlides fade">
                           <img class="homePageSlides imageCover" src=HomePage/test2.jpg">
                           <p id="fadeTxt1S2">"text1 for slide2"</p>
                           <p id="fadeTxt2S2">"text2 for slide2"</p>
                 </div>
                <div class="mySlides fade">
                           <img class="homePageSlides imageCover" src=HomePage/test3.jpg">
                           <p id="fadeTxt1S3">"text1 for slide3"</p>
                           <p id="fadeTxt2S3">"text2 for slide3"</p>
                 </div>
            <a class="prev" onclick="plusSlides(-1)">&lsaquo;</a>
            <a class="next" onclick="plusSlides(1)">&rsaquo;</a>

      </div>
</html>

如果我正确理解，您想在按'prev/next'时直接显示当前幻灯片的文本，然后按默认顺序显示其他文本。

下面是代码 (我在您的JavaScript代码的底部更新了一些代码(：

我的意见是添加一个偏移= [the index of current slide]，以确保首先处理当前幻灯片的文本。

ps：请在完整页面中测试幻灯片。

      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";
              // Fade In the texts of all slides in specific order.
              for (i = 0; i < slides.length; i++) {
                // calculate out current SlideIndex for text fade in
                var targetIndex = (n+i)%slides.length+1; //(n+i) to make sure current slide will be processed first
                $(slides[slideIndex-1]).find('#fadeTxt1S' + targetIndex).fadeIn(3000);
                $(slides[slideIndex-1]).find('#fadeTxt2S' + targetIndex).fadeIn(3000);
              }
              t=setTimeout(showSlides, 7500)
        };

     #fadeTxt1S1 {
     display: none;
     color: white;
     position: absolute;
     top: 300px;
     left: 250px;
     font-size: 65px;
     font-family: serif;
     font-style: italic;
     opacity: 0.9;
     text-shadow:  2px 2px #9B51E0;
     }
     #fadeTxt2S1 {
     display: none;
     color: white;
     position: absolute;
     bottom: 470px;
     right: 340px;
     font-size: 65px;
     font-family: serif;
     font-style: italic;
     opacity: 0.9;
     text-shadow:  2px 2px #9B51E0;
     }
     #fadeTxt1S2 {
     display: none;
     color: white;
     position: absolute;
     top: 200px;
     left: 300px;
     font-size: 65px;
     font-family: serif;
     font-style: italic;
     opacity: 0.9;
     text-shadow:  2px 2px #9B51E0;
     }
     #fadeTxt2S2 {
     display: none;
     color: white;
     position: absolute;
     bottom: 610px;
     right: 170px;
     font-size: 65px;
     font-family: serif;
     font-style: italic;
     opacity: 0.9;
     text-shadow:  2px 2px #9B51E0;
     }
     #fadeTxt1S3 {
     display: none;
     color: white;
     position: absolute;
     top: 310px;
     right: 110px;
     font-size: 60px;
     font-family: serif;
     font-style: italic;
     opacity: 0.9;
     text-shadow:  2px 2px #9B51E0;
     }
     #fadeTxt2S3 {
     display: none;
     color: white;
     position: absolute;
     bottom: 510px;
     right: 70px;
     font-size: 60px;
     font-family: serif;
     font-style: italic;
     opacity: 0.9;
     text-shadow:  2px 2px #9B51E0;
     }
     
     .prev {
      font-size:32px;
     }
     .prev:hover {
      font-size:40px;
      color:red;
     }
     
     .next {
      font-size:32px;
     }
     .next:hover {
      font-size:40px;
      color:blue;
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideShowContainer">
             <div class="mySlides fade">
                       <img class="homePageSlides imageCover" src=HomePage/slide3b.jpg">
                       <p id="fadeTxt1S1">"text1 for slide1"</p>
                       <p id="fadeTxt2S1">"text2 for slide1"</p>
             </div>
            <div class="mySlides fade">
                       <img class="homePageSlides imageCover" src=HomePage/test2.jpg">
                       <p id="fadeTxt1S2">"text1 for slide2"</p>
                       <p id="fadeTxt2S2">"text2 for slide2"</p>
             </div>
            <div class="mySlides fade">
                       <img class="homePageSlides imageCover" src=HomePage/test3.jpg">
                       <p id="fadeTxt1S3">"text1 for slide3"</p>
                       <p id="fadeTxt2S3">"text2 for slide3"</p>
             </div>
        <a class="prev" onclick="plusSlides(-1)">&lsaquo;</a>
        <a class="next" onclick="plusSlides(1)">&rsaquo;</a>
  </div>

相关内容

最新更新

热门标签：