当图像返回第一张图像时，文本动画停止

时间：2017-01-25 08:50:55

标签： javascript html css animation

我正在建立一个网站，首页上有一个图片滑块，上面有文字。

首先它很好地开始，但是当图像回到开始时，文本动画停止。有人可以帮助我让文字动画继续显示吗？

这就是我所做的：

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>

3 个答案:

答案 0 :(得分：0)

你应该使用animation-iteration-count: infinite;＆amp; -webkit-animation-iteration-count: infinite;根据您的要求实现重复动画。

参考代码：

＆＃13;
＆＃13; 
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);
}
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：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>

答案 2 :(得分：0)

完整代码，每个图像的文本描述（只要每个图像相同，就不会改变）

<!-- 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 -->
相关问题
最新问题