使用生命周期的JavaScript图像-旋转木马

Question

我得实现一个图像传送带。

因为我将在可能包含各种外部库的其他项目中重用这个片段，所以我使用了一个立即调用的函数表达式。

我的代码可以改进吗？

所有的暗示都很感激。

(function (imgPaths, imgTag, prevButton, nextButton) {
  var length = imgPaths.length;
  var i = 0;

  function setImageSrc () {
    // Using alt-attribute for simplicity.
    // In production the src-attribute is used.
    imgTag.setAttribute('alt', imgPaths[i]);
  }

  setImageSrc();

  prevButton.addEventListener('click', function() {
    i = ((i - 1) + length) % length;
    setImageSrc();
  });

  nextButton.addEventListener('click', function() {
    i = (i + 1) % length;
    setImageSrc();
  });
})( [ 'imgs/first', 'imgs/second', 'imgs/third',
     'imgs/fourth', 'imgs/fifth' ],
   document.querySelector('.display img'),
   document.querySelector('.prev'),
   document.querySelector('.next') );

<div class="wrap">	
  <div class="display">
    <img src="#" alt=""  /> 
  </div>
  <button class="prev"> << </button>
  <button class="next"> >> </button>		  
</div>

Answer 1

旋转木马是一种增强，一种显示相同数据的不同方式。如果没有旋转木马效应，旋转木马就是一张图像列表。如果JS被关闭，或者由于某种原因，脚本会爆炸，人们仍然会期望看到图像，尽管布局不完整。

在这种情况下，我会把它格式化为一个列表。

<div class="my-carousel">   
  <ul class="my-carousel__deck">
    <li class="my-carousel__slide"><img src="img1.jpg" /></li>
    <li class="my-carousel__slide"><img src="img2.jpg" /></li>
    <li class="my-carousel__slide"><img src="img3.jpg" /></li> 
  </ul>
  <div class="my-carousel__controls">
    <button type="button" class="my-carousel__control my-carousel__control--prev"> << </button>
    <button type="button" class="my-carousel__control my-carousel__control--next"> >> </button>       
  </div>
</div>

另外，我还参加了几门造型课。默认情况下，您可以隐藏按钮并显示所有图像。当JS运行时，它会显示控件并隐藏除一个图像之外的所有图像。

.my-carousel{...}                   # Widget style
.my-carousel__deck{...}             # Deck
.my-carousel__slide{...}            # Default slide style
.my-carousel__slide--hidden{...}    # Styles when a slide is hidden
.my-carousel__controls{...}         # Default controls styles
.my-carousel__controls--active{...} # Controls when active

你的旋转木马看起来很简单，只显示一个图像，没有滑动效果等。我们可以进一步改进。因为我们将图像源从JS移开，所以我们可以只关注效果。

;(function(images, controls, prevButton, nextButton){

  const imageHiddenClass    = 'my-carousel__slide--hidden';
  const controlsActiveClass = 'my-carousel__controls--active';
  let currentSlide = 0;

  function setActiveSlide(index){
    // Hide all images
    images.forEach(image => image.classList.add(imageHiddenClass));
    // But then show the one we want shown
    images[index].classList.remove(imageHiddenClass);
  }

  prevButton.addEventListener('click', function() {
    currentSlide = (currentSlide - 1) % images.length;
    setActiveSlide(currentSlide);
  });

  nextButton.addEventListener('click', function() {
    currentSlide = (currentSlide + 1) % images.length;
    setActiveSlide(currentSlide);
  });

  // Show the controls that are hidden by default
  controls.classList.add(controlsActiveClass);

  // Set the first slide as active
  setActiveSlide(currentSlide);

})(
   Array.prototype.slice.call(document.querySelectorAll('.my-carousel__slide')),
   document.querySelector('.carousel__controls'),
   document.querySelector('.carousel__control--prev'),
   document.querySelector('.carousel__control--next')
);

在上面，脚本稍微长了一点，但它采用了另一种方法。主要的区别在于，与更改映像的srcs不同，因为图像都在标记中，所以脚本现在所做的是切换my-carousel__slide--hidden类，添加它以隐藏不对焦的图像。