按照目前的状态，我有一个幻灯片显示，当自动执行时，它会在特定图像上淡入特定文本（这很好），但是当按下next / 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)">‹</a>
<a class="next" onclick="plusSlides(1)">›</a>
</div>
</html>
最佳答案
如果我理解正确，您想按“上一页/下一页”直接显示当前幻灯片的文本，然后按默认顺序显示其他文本。
以下是代码（我在Javascript代码底部更新了一些代码）：
我的意见是添加一个offset = [the index of current slide]以确保当前幻灯片的文本将首先被处理。
附言：请全页测试幻灯片。
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)">‹</a>
<a class="next" onclick="plusSlides(1)">›</a>
</div>