手写javascript效果基于js的手写组件

温馨提示：这篇文章已超过239天没有更新，请注意相关的内容是否还可用！

手写JavaScript效果是指通过纯JavaScript代码实现一些动态效果或交互功能，而不依赖于任何第三方库或框架。这种方式可以提高代码的灵活性和可控性，并且可以更好地理解和掌握JavaScript语言的特性和原理。

下面以手写一个简单的图片轮播组件为例进行讲解。

我们需要一个包含多张图片的容器，以及两个按钮用于切换图片。我们可以使用HTML和CSS来创建这个基本结构，并给每个元素添加相应的类名和样式。


<div class="72b4-5877-b609-8de5 slider">
  <img class="5877-b609-8de5-45dc slide" src="image1.jpg" alt="Image 1">
  <img class="b609-8de5-45dc-1d55 slide" src="image2.jpg" alt="Image 2">
  <img class="8de5-45dc-1d55-3c19 slide" src="image3.jpg" alt="Image 3">
  <button class="45dc-1d55-3c19-86b5 prev">Previous</button>
  <button class="1d55-3c19-86b5-84d1 next">Next</button>
</div>

接下来，我们需要使用JavaScript来实现图片轮播的效果。我们需要获取到相关的DOM元素，以便后续操作。可以使用`querySelector`方法来获取特定的元素。


const slider = document.querySelector('.slider');
const slides = document.querySelectorAll('.slide');
const prevButton = document.querySelector('.prev');
const nextButton = document.querySelector('.next');

接下来，我们需要定义一个变量来跟踪当前显示的图片索引。初始时，我们可以将索引设置为0，表示显示第一张图片。


let currentIndex = 0;

然后，我们需要编写一个函数来切换图片。在切换之前，我们需要先隐藏当前显示的图片，然后显示下一张或上一张图片。可以通过修改元素的`style`属性来实现这一功能。


function showSlide(index) {
  slides[currentIndex].style.display = 'none';
  slides[index].style.display = 'block';
  currentIndex = index;
}

接下来，我们需要为按钮添加点击事件监听器，以便在点击按钮时切换图片。可以使用`addEventListener`方法来为元素添加事件监听器。


prevButton.addEventListener('click', function() {
  let index = currentIndex - 1;
  if (index < 0) {
    index = slides.length - 1;
  }
  showSlide(index);
});
nextButton.addEventListener('click', function() {
  let index = currentIndex + 1;
  if (index >= slides.length) {
    index = 0;
  }
  showSlide(index);
});