Блог

Получил этот вращающийся баннер JS из Codepen, изменил некоторые значения, чтобы они соответствовали классам и переменной, которые у меня есть. Анимация работает хорошо, единственная проблема, с которой я сталкиваюсь, заключается в том, что предыдущая кнопка и следующая кнопка не работают. Вместо этого приостанавливает анимацию. Я попытался удалить режим заполнения, но это не работает. Работает над кодом, поэтому я думаю, что, возможно, что-то не так с JS.

HTML:

 <div class="desktop" id="mobile-accessory" style="transform: translateY(4rem);">
  <button class="prev-accessory" id="prev-accessory"></button>
  <div class="mobile-accessory charge" id="charge">
    <img style="width: 4.8rem;margin-bottom: 3rem" src="">
    <p style="font-size: 2rem;font-weight: 700;"></p>
    <p></p>
  </div>
  <div class="mobile-accessory magnetic" id="magnetic">
    <img style="width: 4.9rem;margin-bottom: 3rem" src="">
    <p style="font-size: 2rem;font-weight: 700;"></p>
    <p></p>
  </div>
  <div class="mobile-accessory all-at-once" id="all-at-once">
    <div class="accessory-images" style="margin-bottom: 5.868rem;">
      <img style="width: 2.8rem;margin-right: 2.5rem" src="">
      <img style="width: 4.8rem;margin-right: 2.5rem" src="">
      <img style="width: 3.2rem;" src="">
    </div>
    <p style="font-size: 2rem;font-weight: 700;"></p>
    <p></p>
  </div>
  <button class="next-accessory" id="next-accessory"></button>
</div>
 

CSS:

 .mobile-accessory {
  display: block;
  padding: 4rem 4rem;
  align-items: flex-start;
  border: 1px solid #f8f8f8;
  border-radius: 25px;
  box-shadow: 0 2px 9px -3px #012a4d;
  background-color: #fff;
  position: absolute;
  z-index: 3;
}

.magnetic {
  transform: translate(25rem, -4rem); 
  z-index: 2; 
  opacity: 0.5;
}

.all-at-once {
  transform: translate(-25rem, -4rem); 
  z-index: 2; 
  opacity: 0.5;
}

.prev-accessory {
    visibility: hidden;
    height: 38.5rem;
    position: absolute;
    margin-top: -4rem;
    width: 14rem;
    margin-left: -4rem;
    z-index: 5;
  }

  .next-accessory {
    visibility: hidden;
    height: 38.5rem;
    position: absolute;
    margin-top: -4rem;
    width: 14rem;
    right: 0;
    margin-right: -4rem;
    z-index: 5;
  }
 

JS

 var bannerStatus = 1;
var bannerTimer = 4000;
window.onload = function() {
  bannerLoop();
}

var startBannerLoop = setInterval(function() {
  bannerLoop();
}, bannerTimer);

document.getElementById("mobile-accessory").onmouseenter = function() {
  clearInterval(startBannerLoop);
}

document.getElementById("prev-accessory").onclick = function() {
  if (bannerStatus === 1) {
    bannerStatus = 2;
  }
  else if (bannerStatus === 2) {
    bannerStatus = 3;
  }
  else if (bannerStatus === 3) {
    bannerStatus = 1;
  }
  bannerLoop();
}

document.getElementById("next-accessory").onclick = function() {
  bannerLoop();
}

document.getElementById("mobile-accessory").onmouseleave = function() {
  startBannerLoop = setInterval(function() {
    bannerLoop();
  }, bannerTimer);
}

function bannerLoop() {
  if (bannerStatus === 1) {
    
      setTimeout(function() {
        document.getElementById("magnetic").style.animationName = "right-center";
        document.getElementById("magnetic").style.animationDuration = "1s";
        document.getElementById("magnetic").style.animationFillMode = "forwards";
        document.getElementById("all-at-once").style.animationName = "left-right";
        document.getElementById("all-at-once").style.animationDuration = "1s";
        document.getElementById("all-at-once").style.animationFillMode = "forwards";
        document.getElementById("charge").style.animationName = "center-left";
        document.getElementById("charge").style.animationFillMode = "forwards";
        document.getElementById("charge").style.animationDuration = "1s"; 
      }, 500);
      bannerStatus = 2;
  } else if (bannerStatus === 2) {
      setTimeout(function() {
        document.getElementById("all-at-once").style.animationName = "right-center"; 
        document.getElementById("all-at-once").style.animationDuration = "1s";
        document.getElementById("all-at-once").style.animationFillMode = "forwards";
        document.getElementById("charge").style.animationName = "left-right";
        document.getElementById("charge").style.animationDuration = "1s";
        document.getElementById("charge").style.animationFillMode = "forwards";
        document.getElementById("magnetic").style.animationName = "center-left";
        document.getElementById("magnetic").style.animationFillMode = "forwards";
        document.getElementById("magnetic").style.animationDuration = "1s"; 
      }, 500);
      bannerStatus = 3;
  } else if (bannerStatus === 3) {
      setTimeout(function() {
        document.getElementById("charge").style.animationName = "right-center";
        document.getElementById("charge").style.animationFillMode = "forwards";
        document.getElementById("charge").style.animationDuration = "1s";   
        document.getElementById("magnetic").style.animationName = "left-right";
        document.getElementById("magnetic").style.animationDuration = "1s";
        document.getElementById("magnetic").style.animationFillMode = "forwards";
        document.getElementById("all-at-once").style.animationName = "center-left";
        document.getElementById("all-at-once").style.animationDuration = "1s";
        document.getElementById("all-at-once").style.animationFillMode = "forwards";
      }, 500);
      bannerStatus = 1;
  }
  
}