画像が最初の画像に戻ったときにテキストのアニメーションが停止する

Question

私はウェブサイトを構築しています。先頭ページには画像のスライダがあり、テキストが表示されています。

最初はうまく始まりますが、画像が最初に戻ってきたら、テキストアニメーションは停止します。誰かが私にテキストアニメーションを表示し続けるように助けることができますか？

これは私がやったことです：

var slideIndex = 0; 
 
showSlides(); 
 

 
function showSlides() { 
 
    var i; 
 
    var slides = document.getElementsByClassName("mySlides"); 
 
    var dots = document.getElementsByClassName("dots"); 
 
    var container = document.getElementsByClassName("captiontxt"); 
 
    var tmp = container.innerHTML; 
 
    container.innerHTML = tmp; 
 
    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(" active2", ""); 
 
    } 
 
    slides[slideIndex - 1].style.display = "block"; 
 
    dots[slideIndex - 1].className += " active2"; 
 
    setTimeout(showSlides, 6000); 
 
}

.mySlides { 
 
    display: none; 
 
} 
 
.fade2 { 
 
    -webkit-animation-name: fade; 
 
    -webkit-animation-duration: 4.5s; 
 
    animation-name: fade; 
 
    animation-duration: 4.5s; 
 
} 
 
@keyframes fade { 
 
    from { 
 
    opacity: .4; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
} 
 
@keyframes dropHeader { 
 
    0% { 
 
    transform: translate(-100%, 0%); 
 
    -ms-transform: translate(-100%, 0%); 
 
    } 
 
    100% { 
 
    transform: translate(0%, 0%); 
 
    -ms-transform: translate(0%, 0%); 
 
    } 
 
} 
 
.captiontxt { 
 
    color: #fff!important; 
 
    font-size: 25px; 
 
    padding: 8px 12px; 
 
    position: absolute; 
 
    width: 60%; 
 
    text-align: center; 
 
    left: 0; 
 
    bottom: 0; 
 
    background-color: #0062f6!important; 
 
    opacity: 0.5; 
 
    animation-name: dropHeader; 
 
    animation-iteration-count: 1; 
 
    animation-timing-function: ease-in-out; 
 
    animation-duration: 0.6s; 
 
    -webkit-animation-name: dropHeader; 
 
    -webkit-animation-iteration-count: 1; 
 
    -webkit-animation-timing-function: ease-in-out; 
 
    -webkit-animation-duration: 0.6s; 
 
}

<div class="mySlides fade2"> 
 
    <img src="image put in here" style="width: 100%; height:640px;"> 
 
    <div class="captiontxt">Write the text here</div> 
 
</div>

Answer 1

あなたはあなたの要件ごとに繰り返す、アニメーションを実現するためにanimation-iteration-count: infinite; & -webkit-animation-iteration-count: infinite;を使用する必要があります。

コード参照してください：

var slideIndex = 0; 
 
showSlides(); 
 

 
function showSlides() { 
 
    var i; 
 
    var slides = document.getElementsByClassName("mySlides"); 
 

 
    var container = document.getElementsByClassName("captiontxt"); 
 
    var tmp = container.innerHTML; 
 
    container.innerHTML = tmp; 
 
    for (i = 0; i < slides.length; i++) { 
 
    slides[i].style.display = "none"; 
 
    } 
 
    slideIndex++; 
 
    if (slideIndex > slides.length) { 
 
    slideIndex = 1 
 
    } 
 
    slides[slideIndex - 1].style.display = "block"; 
 
    setTimeout(showSlides, 6000); 
 
}

.mySlides { 
 
    display: none; 
 
} 
 
.fade2 { 
 
    -webkit-animation-name: fade; 
 
    -webkit-animation-duration: 4.5s; 
 
    animation-name: fade; 
 
    animation-duration: 4.5s; 
 
} 
 
@keyframes fade { 
 
    from { 
 
    opacity: .4; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
} 
 
@keyframes dropHeader { 
 
    0% { 
 
    transform: translate(-100%, 0%); 
 
    -ms-transform: translate(-100%, 0%); 
 
    } 
 
    100% { 
 
    transform: translate(0%, 0%); 
 
    -ms-transform: translate(0%, 0%); 
 
    } 
 
} 
 
.captiontxt { 
 
    color: #fff!important; 
 
    font-size: 25px; 
 
    padding: 8px 12px; 
 
    position: absolute; 
 
    width: 60%; 
 
    text-align: center; 
 
    left: 0; 
 
    bottom: 0; 
 
    background-color: #0062f6!important; 
 
    opacity: 0.5; 
 
    animation-name: dropHeader; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: ease-in-out; 
 
    animation-duration: 0.6s; 
 
    -webkit-animation-name: dropHeader; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -webkit-animation-timing-function: ease-in-out; 
 
    -webkit-animation-duration: 0.6s; 
 
}

<div class="mySlides fade2"> 
 
    <img src="https://s-media-cache-ak0.pinimg.com/736x/89/2f/7d/892f7d36162123ab12344958a2cf5f2c.jpg" style="width: 100%; height:640px;"> 
 
    <div class="captiontxt">Write the text here</div> 
 
</div>

Answer 2

を私が（0.6秒から1.2秒へ）少しそれを鈍化が、スニペットが役立つはずです。無限のアニメーションカウントは、基本的にイメージの数に関係なくアニメーションをループします。ただし、画像ごとにテキストを変更したい場合は、これが正しい動作手順ではない可能性があります。あなたがこれを行うことを考えているなら、答えにコメントしてください。

var slideIndex = 0; 
 

 
showSlides(); 
 

 
function showSlides() { 
 
    var i; 
 
    var slides = document.getElementsByClassName("mySlides"); 
 
    var dots = document.getElementsByClassName("dots"); 
 
    var container = document.getElementsByClassName("captiontxt"); 
 
    var tmp = container.innerHTML; 
 
    container.innerHTML = tmp; 
 
    for (i = 0; i < slides.length; i++) { 
 
    slides[i].style.display = "none"; 
 
    } 
 
    for (i = 0; i < dots.length; i++) { 
 
    dots[i].className = dots[i].className.replace(" active2", ""); 
 
    } 
 
    slideIndex++; 
 

 
    if (slideIndex >= slides.length) { 
 
    slideIndex = 0; 
 
    } 
 
    
 
    slides[slideIndex].style.display = "block"; 
 
    setTimeout(showSlides,5000); 
 
}

.mySlides { 
 
    display: none; 
 
} 
 
.fade2 { 
 
    -webkit-animation-name: fade; 
 
    -webkit-animation-duration: 4.5s; 
 
    animation-name: fade; 
 
    animation-duration: 4.5s; 
 
} 
 
@keyframes fade { 
 
    from { 
 
    opacity: .4; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
} 
 
@keyframes dropHeader { 
 
    0% { 
 
    transform: translate(-100%, 0%); 
 
    -ms-transform: translate(-100%, 0%); 
 
    } 
 
    100% { 
 
    transform: translate(0%, 0%); 
 
    -ms-transform: translate(0%, 0%); 
 
    } 
 
} 
 
.captiontxt { 
 
    color: #fff!important; 
 
    font-size: 25px; 
 
    padding: 8px 12px; 
 
    position: absolute; 
 
    width: 60%; 
 
    text-align: center; 
 
    left: 0; 
 
    bottom: 0; 
 
    background-color: #0062f6!important; 
 
    opacity: 0.5; 
 
    animation-name: dropHeader; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: ease-in-out; 
 
    animation-duration: 1.2s; 
 
    -webkit-animation-name: dropHeader; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -webkit-animation-timing-function: ease-in-out; 
 
    -webkit-animation-duration: 1.2s; 
 
}

<div class="mySlides fade2"> 
 
    <img src="image put in here" style="width: 100%; height:640px;"> 
 
    <p class="captiontxt dots">Write the text here</p> 
 
</div>

Answer 3

完全なコードは、テキストは、各画像の説明私はスニペットを作成し

<!-- language: lang-js --> 

var slideIndex = 0; 
    showSlides(); 

    function showSlides() { 
     var i; 
     var slides = document.getElementsByClassName("mySlides"); 
     var dots = document.getElementsByClassName("dots"); 
     //var container = document.getElementsByClassName("captiontxt"); 
     //var tmp = container.innerHTML; 
     //container.innerHTML = tmp; 
     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(" active2", ""); 
     } 
     slides[slideIndex - 1].style.display = "block"; 
     dots[slideIndex - 1].className += " active2"; 
     setTimeout(showSlides, 6000); // Change image every 5 seconds 
    } 

<!-- language: lang-css --> 

* { 
     box-sizing: border-box; 
} 
.slideshow-container { 
     width: 100%; 
     position: relative; 
     margin: 0 0 0 0; 
     height: 600px; 
    } 
.active2 { 
     background-color: #717171; 
    } 
.dots { 
     height: 13px; 
     width: 13px; 
     margin: 0 2px; 
     background-color: #bbb; 
     border-radius: 50%; 
     display: inline-block; 
     transition: background-color 4.0s ease; 
} 
.mySlides { 
    display: none; 
} 
.fade2 { 
    -webkit-animation-name: fade; 
    -webkit-animation-duration: 4.5s; 
    animation-name: fade; 
    animation-duration: 4.5s; 
} 
@keyframes fade { 
    from { 
    opacity: .4; 
    } 
    to { 
    opacity: 1; 
    } 
} 
@keyframes dropHeader { 
    0% { 
    transform: translate(-100%, 0%); 
    -ms-transform: translate(-100%, 0%); 
    } 
    100% { 
    transform: translate(0%, 0%); 
    -ms-transform: translate(0%, 0%); 
    } 
} 
.captiontxt { 
    color: #fff!important; 
    font-size: 25px; 
    padding: 8px 12px; 
    position: absolute; 
    width: 60%; 
    text-align: center; 
    left: 0; 
    bottom: 0; 
    background-color: #0062f6!important; 
    opacity: 0.5; 
    animation-name: dropHeader; 
    animation-iteration-count: 1; 
    animation-timing-function: ease-in-out; 
    animation-duration: 0.6s; 
    -webkit-animation-name: dropHeader; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-timing-function: ease-in-out; 
    -webkit-animation-duration: 0.6s; 
} 

<!-- language: lang-html --> 

    <div class="slideshow-container"> 
     <%--repeat this section as much as the number of image--%> 
     <div class="mySlides fade2"> 
      <img src="images.jpg" style="width: 100%; height: 640px;"> 
      <div class="captiontxt"><a href="#" style="color: #ffffff">Text 1<br />Text 2</a></div> 
     </div> 
     <%--end section--%> 
    </div> 
    <br> 
    <div style="text-align: center; visibility: hidden;"> 
     <%--repeat this section as much as the number of image--%> 
     <span class="dots"></span> 
     <%--end section--%> 
    </div> 

<!-- end snippet -->