Question

我正在尝试构建一个简单的幻灯片，其中图像滑出两秒钟，而另一张图像则显示在其下方。

(function ready(fn) {
  if (document.readyState != 'loading') {
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
})(init);

function init() {
  var pictureCollection = document.getElementsByClassName('slideshowimg');
  var pictureTracker = document.getElementsByClassName('trackPoint');
  var count = 0;

  //load initial pic
  pictureCollection[count].style.animation = 'fadein10 0.1s forwards';
  pictureTracker[count].style.backgroundColor = 'black';

  //Fade
  var fadetime = setInterval(function() {
    fading()
  }, 5000);

  function fading() {
    pictureCollection[count].style.animation = 'fadeout10 2s forwards';
    pictureTracker[count].style.backgroundColor = 'gray';
    if (count == pictureCollection.length - 1) {
      count = -1;
    }
    count++;
    pictureCollection[count].style.animation = 'fadein10 2s forwards';
    pictureTracker[count].style.backgroundColor = 'black';

  }

  function fixer(direction) {
    //remove event listener to ensure it doesn't reset EVERY transition
    event.target.removeEventListener('transitionend', fixer);
    pictureCollection[count].style.animation = 'fadeout10 0.1s forwards';
    pictureCollection[count].style.transform = 'translateX(0px)';
    //reset counter
    if (count === 3 && direction === "right") {
      count = 0;
      return;
    }
    if (count === 0 && direction === "left") {
      count = 3;
      return;
    }
    if (direction === "right") {
      count++;
    }
    if (direction === "left") {
      count--;
    }

  }

  //add event listener to handle user clicks to each lside
  for (i = 0; i < pictureCollection.length; i++) {
    pictureCollection[i].addEventListener('click', function() {
      //cancel autofade	
      clearInterval(fadetime);
      //check where on pic user clicked
      if (event.clientX > event.target.width / 2) {
        event.target.style.animation = 'nofade10 0.1s forwards';
        pictureTracker[count].style.backgroundColor = 'gray';
        if (count === 3) {
          pictureCollection[0].style.animation = 'fadein5 0.1s forwards';
          pictureTracker[0].style.backgroundColor = 'black';
        } else {
          //bring next pic forwards and unhide
          pictureCollection[count + 1].style.animation = 'fadein5 0.1s forwards';
          pictureTracker[count + 1].style.backgroundColor = 'black';
        }
        //slide out right
        event.target.style.transform = 'translateX(250px)';
        //ensure that when the picture slides out it repositions behind
        pictureCollection[count].addEventListener('transitionend', fixer('right'));

      }
      //or going left . . . 
      else {
        pictureCollection[count].style.animation = 'nofade10 0.1s forwards';
        pictureTracker[count].style.backgroundColor = 'gray';
        if (count === 0) {
          pictureCollection[3].style.animation = 'fadein5 0.1s forwards';
          pictureTracker[3].style.backgroundColor = 'black';
        } else {
          //bring next pic forwards and unhide
          pictureCollection[count - 1].style.animation = 'fadein5 0.1s forwards';
          pictureTracker[count - 1].style.backgroundColor = 'black';
        }
        //slide out left
        event.target.style.transform = 'translateX(-' + pictureCollection[count].width + 'px)';
        //ensure that when the picture slides out it repositions behind
        pictureCollection[count].addEventListener('transitionend', fixer("left"), false);


      }
    });
  }
}

.slideshowimg {
  height: 100%;
  width: 100%;
  position: inherit;
  z-index: 0;
  opacity: 0;
  transition: all 2s ease-in-out;
}
#sliderCase {
  overflow: hidden;
  position: absolute;
  z-index: 5;
  background-color: black;
  height: 150px;
  width: 225px;
}
.trackPoint {
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: gray;
  display: inline-block;
  border-radius: 2em;
  text-align: center;
  position: relative;
  top: 160px;
  left: 75px;
}
@keyframes fadein10 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
    z-index: 10;
  }
}
@keyframes fadeout10 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    z-index: 0;
  }
}
@keyframes fadein5 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
    z-index: 5;
  }
}
@keyframes nofade10 {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
    z-index: 10;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf8'>
  <script src='mainedit.js'></script>
  <link rel='stylesheet' href='stylesedit.css' type='text/css'></link>
  <title>Slideshow test</title>
</head>

<body>
  <h1> Slideshow test: </h1>
  <div id='sliderCase'>
    <div style='background-color:red' class='slideshowimg'>pic 1</div>
    <div style='background-color:blue' class='slideshowimg'>pic 2</div>
    <div style='background-color:green' class='slideshowimg'>pic 3</div>
    <div style='background-color:orange' class='slideshowimg'>pic 4</div>
  </div>
  <span class='trackPoint'></span>
  <span class='trackPoint'></span>
  <span class='trackPoint'></span>
  <span class='trackPoint'></span>
</body>

</html>

似乎转换结束事件在转换开始时触发。此外，幻灯片的移动似乎在片段中反转，但在本地工作。

为了这个例子，我使用彩色div代替图像。

Answer 1

这是不正确的：

pictureCollection[count].addEventListener('transitionend', fixer("left"), false);

在这里，您正在调用并将fixer("left")的返回值添加到事件侦听器，无论如何它都不是有效值。

Javascript CSS转换在转换开始时结束

1 个答案: