滑塊中的錯誤

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