Question

我正在制作slideShow，并且正在尝试使.slidesTextes从底部进行翻译并更改不透明度，所有这些均由调用JS函数的按钮控制。

但是，它只能使用一次：页面完全加载后。我试图找出原因，但是被困住了。我只能说，当我使用控制台并通过ligne键入我的JS代码ligne时，它可以完美运行。但是，如果我一次在控制台中键入完整的JS代码，它将不再起作用...

请在下面找到代码：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta title="">
            <link rel="stylesheet" href="styleSheet.css">
            <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
        </head>
        
        <body>

            <div class="slides">
                <div class="slidesImages">
                    <img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
                    <img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
                    <img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
                    <img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
                </div>
                <div class="slidesTextes">
                    <span class="slidesTitre"><h2>First title</h2></span>
                    <span class="slidesTitre"><h2>Second title</h2></span>
                    <span class="slidesTitre"><h2>Third title</h2></span>
                    <span class="slidesTitre"><h2>Forth title</h2></span>
                </div>
                <div class="slidesBoutons">
                    <span id="slidesNumeros">1/4</span>
                    <a class="fleche" onclick="changeSlide(-1);">&#60;</a>
                    <a class="fleche" onclick="changeSlide(1);">&#62;</a>
                    <a class="appelAction" href="https://tout-pres-de-chez-moi.fr/pages/demander-une-livraison-a-domicile">Button/link →</a>
                </div>
            </div>
            
        </body>
    </html>

这是我使用的脚本：

<script>
var numeroSlide=1;
afficherSlide(numeroSlide);
function changeSlide(numero){
    numeroSlide=numeroSlide+numero;
    if(numeroSlide<1){numeroSlide=4;}
    if(numeroSlide>4){numeroSlide=1;}
    afficherSlide(numeroSlide);
}

function afficherSlide(numeroSlide){
    listImages=document.getElementsByClassName("image");
    listTitres=document.getElementsByClassName("slidesTitre");
    for(i=0;i<listImages.length;i++){
        listImages[i].style.display="none";
        listTitres[i].style.display="none";
    }
    listImages[numeroSlide-1].style.display="";
    listTitres[numeroSlide-1].style.display="";
    document.getElementById("slidesNumeros").innerHTML=numeroSlide+"/"+listImages.length;
    apparaitre();
}

function apparaitre(){
    document.getElementsByClassName("slidesTextes")[0].style.display="none";
    document.getElementsByClassName("slidesTextes")[0].style.display="";                    
}
</script>

这是CSS文件：

        margin: 0px;
        padding: 0px;
    }
    
    .slides{
        height: 100vh;
        position: absolute;
    }
    
    .slidesImages{
        width: 100vw;
        max-width: 100%;
        height: 100vh;
        position: relative;
        overflow: hidden;
    }
    
    .slidesImages img{
        width: 102%;
        min-width: 1000px;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation-name: slideChange;
        animation-duration: 1s;
    }
    
    @keyframes slideChange{
        from{opacity: 0;}
        to{opacity: 1;}
    }
    
    .slidesTextes{
        font-family: serif;
        font-size: 7vh;
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 25vh;
        left: 8%;
        animation: apparition 1s; 
        border: 1px solid red;
        }
    
    @keyframes apparition{
        from{opacity: 0;bottom: 0vh;}
        to{opacity:1;bottom: 25vh;}
    }
    
    .slidesTextes h2{
        display: inline;
        background-color: #f4743c;
        padding: 0 1vw;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
    }
    
    .slidesBoutons{
        position: absolute;
        bottom: 15%;
        left: 8%;
        width: 90%;
        margin: 0.5vh 0;
    }
    
    .slidesBoutons *{
        background-color: #29893f;
        color: white;
        font-family: sans-serif;
        font-weight: bold;
        font-size: 2.5vh;
        float: left;
        box-sizing: border-box;
        height: 7vh;
        line-height: 7vh;
        padding: 0 1.5vw;
        margin: 0 0.1vw;
        text-decoration: none;
    }
    
    .slidesBoutons span{
        opacity: 0.8;
    }
    
    .slidesBoutons a:hover{
        background-color: #39994f;
        cursor: pointer;
        transition: 0.3s ease;
    }

Answer 1

浏览器运行正常；动画仅在节点渲染时触发，并且渲染一次。每当单击箭头按钮时，您都必须删除动画并重新添加它。最简单的方法是使其成为自己的类（运行代码段）：

var numeroSlide = 1;
afficherSlide(numeroSlide);

function changeSlide(numero) {
  animation = document.getElementsByClassName("animation")[0];
  animation.classList.remove("animation");
  setTimeout(()=> animation.classList.add("animation"),0);
  numeroSlide = numeroSlide + numero;
  if (numeroSlide < 1) {
    numeroSlide = 4;
  }
  if (numeroSlide > 4) {
    numeroSlide = 1;
  }
  afficherSlide(numeroSlide);
}

function afficherSlide(numeroSlide) {
  listImages = document.getElementsByClassName("image");
  listTitres = document.getElementsByClassName("slidesTitre");
  for (i = 0; i < listImages.length; i++) {
    listImages[i].style.display = "none";
    listTitres[i].style.display = "none";
  }
  listImages[numeroSlide - 1].style.display = "";
  listTitres[numeroSlide - 1].style.display = "";
  document.getElementById("slidesNumeros").innerHTML = numeroSlide + "/" + listImages.length;
  apparaitre();
}

function apparaitre() {
  document.getElementsByClassName("slidesTextes")[0].style.display = "none";
  document.getElementsByClassName("slidesTextes")[0].style.display = "";
}

    
    margin: 0px;
        padding: 0px;
    }
    
    .slides{
        height: 100vh;
        position: absolute;
    }
    
    .slidesImages{
        width: 100vw;
        max-width: 100%;
        height: 100vh;
        position: relative;
        overflow: hidden;
    }
    
    .slidesImages img{
        width: 102%;
        min-width: 1000px;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation-name: slideChange;
        animation-duration: 1s;
    }
    
    @keyframes slideChange{
        from{opacity: 0;}
        to{opacity: 1;}
    }
    
    .slidesTextes{
        font-family: serif;
        font-size: 7vh;
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 25vh;
        left: 8%;
        border: 1px solid red;
    }
    
    .animation {
      animation: apparition 1s; 
    }
    
    @keyframes apparition{
        from{opacity: 0;bottom: 0vh;}
        to{opacity:1;bottom: 25vh;}
    }
    
    .slidesTextes h2{
        display: inline;
        background-color: #f4743c;
        padding: 0 1vw;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
    }
    
    .slidesBoutons{
        position: absolute;
        bottom: 15%;
        left: 8%;
        width: 90%;
        margin: 0.5vh 0;
    }
    
    .slidesBoutons *{
        background-color: #29893f;
        color: white;
        font-family: sans-serif;
        font-weight: bold;
        font-size: 2.5vh;
        float: left;
        box-sizing: border-box;
        height: 7vh;
        line-height: 7vh;
        padding: 0 1.5vw;
        margin: 0 0.1vw;
        text-decoration: none;
    }
    
    .slidesBoutons span{
        opacity: 0.8;
    }
    
    .slidesBoutons a:hover{
        background-color: #39994f;
        cursor: pointer;
        transition: 0.3s ease;
    }

<body>

  <div class="slides">
    <div class="slidesImages">
      <img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
      <img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
      <img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
      <img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
    </div>
    <div class="slidesTextes animation">
      <span class="slidesTitre"><h2>First title</h2></span>
      <span class="slidesTitre"><h2>Second title</h2></span>
      <span class="slidesTitre"><h2>Third title</h2></span>
      <span class="slidesTitre"><h2>Forth title</h2></span>
    </div>
    <div class="slidesBoutons">
      <span id="slidesNumeros">1/4</span>
      <a class="fleche" onclick="changeSlide(-1);">&#60;</a>
      <a class="fleche" onclick="changeSlide(1);">&#62;</a>
      <a class="appelAction" href="https://tout-pres-de-chez-moi.fr/pages/demander-une-livraison-a-domicile">Button/link →</a>
    </div>
  </div>

</body>

html

<div class="slidesTextes animation">

javascript

animation = document.getElementsByClassName("animation")[0];
animation.classList.remove("animation");
setTimeout(()=> animation.classList.add("animation"),0);

css

 .animation {
    animation: apparition 1s; 
 }

CSS动画仅可播放一次，此后将无法播放

1 个答案: