滑块中的错误

Question

通过条件滑块必须固定，并通过按下按钮进行切换。单独而言，所有作品都很酷，并且一起休息。情况是这样的......当滑块刚刚启动并出现第一张幻灯片时，切换按钮就可以工作。但是一旦动画完成并且第一张被替换为第二张幻灯片，它就停止工作。更确切地说 - 如果有第二张幻灯片，那么先按下第一个按钮，但它不起作用，并且只有在按下第二个按钮之前开始工作。同样，对于其他幻灯片...

var toggle1 = document.querySelector(".slide-1"); 
 
     var toggle2 = document.querySelector(".slide-2"); 
 
     var slide1 = document.querySelector(".first"); 
 
     var slide2 = document.querySelector(".second"); 
 

 

 
     toggle1.addEventListener("click", function(event) { 
 
      //  event.preventDefault(); 
 
      //   slide2.classList.add("display-slide-1"); 
 
      //   slide1.classList.add("display-slide-2"); 
 
      //   slide2.classList.remove("display-slide-2"); 
 
      //   slide1.classList.remove("display-slide-1"); 
 

 
      //   slide2.classList.add("display-2"); 
 
      //   slide1.classList.add("display-1"); 
 

 

 
      slide2.classList.add("display-slide-2"); 
 
      slide1.classList.add("display-slide-1"); 
 

 
      //   slide2.classList.remove("display-slide-1"); 
 
      //   slide1.classList.remove("display-slide-2"); 
 
      //    
 
      //   slide2.classList.remove("display-2"); 
 
      //   slide1.classList.remove("display-1"); 
 
     }); 
 

 
     toggle2.addEventListener("click", function(event) { 
 
      //  event.preventDefault(); 
 
      //   slide2.classList.add("display-slide-2"); 
 
      //   slide1.classList.add("display-slide-1"); 
 
      //   slide2.classList.remove("display-slide-1"); 
 
      //   slide1.classList.remove("display-slide-2"); 
 

 
      //   slide2.classList.add("display-1"); 
 
      //   slide1.classList.add("display-2"); 
 

 
      slide2.classList.add("display-slide-1"); 
 
      slide1.classList.add("display-slide-2"); 
 

 
      //   slide2.classList.remove("display-slide-2"); 
 
      //   slide1.classList.remove("display-slide-1"); 
 

 
      //   slide2.classList.remove("display-1"); 
 
      //   slide1.classList.remove("display-2"); 
 
     });

.promo .slider-promo { 
 
    position: relative; 
 
    display: inline-block; 
 
    float: left; 
 
    width: 620px; 
 
    height: 265px; 
 
    background-color: #f2f6f8; 
 
    margin-right: 20px; 
 
    color: #fff; 
 
    font-family: "CuprumRegular"; 
 
    font-size: 18px; 
 
    line-height: 24px; 
 
    overflow: hidden; 
 
} 
 
.slider-promo .slide-item { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: url(../img/promo-slide-1.jpg) no-repeat top left; 
 
} 
 
.slider-promo .second { 
 
    /* \t display: none;*/ 
 
    background: url(../img/promo-slide-2.jpg) no-repeat top left; 
 
} 
 
.slider-promo .toggle { 
 
    position: absolute; 
 
    z-index: 100; 
 
    bottom: 35px; 
 
    left: 50%; 
 
    margin-left: -40px; 
 
    width: 80px; 
 
    height: 11px; 
 
} 
 
.slider-promo .label { 
 
    display: inline-block; 
 
    width: 10px; 
 
    height: 10px; 
 
    background-color: #fff; 
 
    border: 2px solid #fff; 
 
    border-radius: 50%; 
 
    cursor: pointer; 
 
    margin-right: 10px; 
 
} 
 
@keyframes first-animation { 
 
    0% { 
 
    left: 0; 
 
    z-index: 2; 
 
    display: block; 
 
    } 
 
    40% { 
 
    left: 0; 
 
    } 
 
    50% { 
 
    left: -620px; 
 
    } 
 
    51% { 
 
    left: -620px; 
 
    z-index: 1; 
 
    } 
 
    52% { 
 
    left: 620px; 
 
    } 
 
    90% { 
 
    left: 620px; 
 
    } 
 
    100% { 
 
    left: 0px; 
 
    } 
 
} 
 
@keyframes second-animation { 
 
    0% { 
 
    left: -620px; 
 
    z-index: 1; 
 
    display: block; 
 
    } 
 
    1% { 
 
    left: 620px; 
 
    } 
 
    40% { 
 
    left: 620px; 
 
    z-index: 2; 
 
    } 
 
    50% { 
 
    left: 0; 
 
    } 
 
    90% { 
 
    left: 0; 
 
    } 
 
    100% { 
 
    left: -620px; 
 
    } 
 
} 
 
.display-slide-1 { 
 
    animation: first-animation 12s linear infinite; 
 
} 
 
.display-slide-2 { 
 
    animation: second-animation 12s linear infinite; 
 
}

<div class="slider-promo"> 
 
    <div class="slide-item first display-slide-1"> 
 
    <div class="name"> 
 
     <h3>First slide</h3> 
 
     <span>Lorem lorem lorem</span> 
 
    </div> 
 
    <a href="" class="btn">More info</a> 
 
    </div> 
 
    <div class="slide-item second display-slide-2"> 
 
    <div class="name"> 
 
     <h3>Second slide</h3> 
 
     <span>Lorem lorem lorem</span> 
 
    </div> 
 
    <a href="" class="btn">More info</a> 
 
    </div> 
 

 
    <div class="toggle"> 
 
    <div class="label slide-1"></div> 
 
    <div class="label slide-2"></div> 
 
    </div>

Answer 1

当点击切换按钮，在适当的触发事件通过从节点元素班级列表同时停止幻灯片的动画，并显示相应的滑道和延迟您的需要，然后将动画添加到节点元素中。

在这里，我的表演滑件提供的逻辑，切换的onclick-2

toggle2.addEventListener("click", function(event) { 
      slide2.classList.remove("display-slide-2"); 
      slide1.classList.remove("display-slide-1"); 

     // alert(slide2.style.zIndex +" "+ slide1.style.zIndex); 
      slide1.style.left = "-620px"; 
      slide2.style.left = "0px"; 
      slide2.style.zIndex = "2"; 
      slide2.style.display ="block"; 

      setTimeout(function(){ 
       slide2.classList.add("display-slide-2"); 
       slide1.classList.add("display-slide-1"); 
      },1000); // set delay as per your need 

     }); 

I hope this meet your expectation