原生js实现简单轮播图

下面是原生JS实现简单轮播图的完整攻略。

下面是原生JS实现简单轮播图的完整攻略。

1. 准备工作

在HTML文件中，需要定义一个容器作为轮播图的父元素，同时在其中添加轮播图片的子元素。例如，在以下代码中，容器的ID为slider，共有3张轮播图片。

<div id="slider">
  <img src="1.jpg" alt="image1">
  <img src="2.jpg" alt="image2">
  <img src="3.jpg" alt="image3">
</div>

2. 实现轮播图

为了实现轮播功能，我们需要控制图片在父元素内部的位置，即控制轮播容器的left值，在此基础上实现自动轮播和手动轮播两种模式。

2.1 控制容器位置

通过CSS属性position: relative将容器定义为相对定位的元素，该元素的子元素可以使用position: absolute实现相对该元素的定位。

#slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}
#slider > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
}

为了实现图片的切换效果，我们使用opacity属性控制当前图片的透明度，使其渐隐渐现。其中，opacity的值为0时表示该元素完全透明，值为1时表示元素不透明。

2.2 自动轮播

为了实现轮播图的自动播放，我们需要设置一个定时器，在每隔一段时间后将容器位置向左移动一张图片的距离。

var slider = document.getElementById('slider');
var images = slider.getElementsByTagName('img');
var current = 0;

function autoPlay() {
  images[current].style.opacity = 0;
  current = (current + 1) % images.length;
  images[current].style.opacity = 1;
  slider.style.left = '-' + current + '00%';
}

setInterval(autoPlay, 2000);

在上述代码中，我们定义current变量表示当前显示的图片序号，依次将其与images数组中的元素作比较，实现图片的透明度控制并将容器位置向左移动。当current的值到达图片数量的最大值时，需要对其进行取模，保证实现循环轮播的效果。

2.3 手动轮播

为了实现轮播图的手动播放，我们需要监听容器的左右滑动事件，与自动播放相似，将容器位置向左或向右移动一张图片的距离，以实现手动切换图片的效果。

var startX, endX;
slider.addEventListener('touchstart', function(event) {
  startX = event.touches[0].clientX;
});
slider.addEventListener('touchmove', function(event) {
  endX = event.touches[0].clientX;
  event.preventDefault();
});
slider.addEventListener('touchend', function(event) {
  if (endX - startX > 50) {
    images[current].style.opacity = 0;
    current = (current - 1 + images.length) % images.length;
    images[current].style.opacity = 1;
    slider.style.left = '-' + current + '00%';
  } else if (startX - endX > 50) {
    images[current].style.opacity = 0;
    current = (current + 1) % images.length;
    images[current].style.opacity = 1;
    slider.style.left = '-' + current + '00%';
  }
});

在上述代码中，我们定义了startX和endX两个变量，分别记录手指接触和移动的位置。当手指完成滑动时，根据startX和endX的差值判断轮播方向，如大于50像素则向右移动，小于-50像素则向左移动。

3. 示例说明

3.1 示例一

以下是一个基本的轮播图示例，该示例实现了基础的自动轮播功能。

<div id="slider">
  <img src="1.jpg" alt="image1">
  <img src="2.jpg" alt="image2">
  <img src="3.jpg" alt="image3">
</div>
<script>
var slider = document.getElementById('slider');
var images = slider.getElementsByTagName('img');
var current = 0;

function autoPlay() {
  images[current].style.opacity = 0;
  current = (current + 1) % images.length;
  images[current].style.opacity = 1;
  slider.style.left = '-' + current + '00%';
}

setInterval(autoPlay, 2000);
</script>

3.2 示例二

以下是一个带有手动轮播功能的轮播图示例，该示例实现了基础的自动轮播功能和手动轮播功能。

<div id="slider">
  <img src="1.jpg" alt="image1">
  <img src="2.jpg" alt="image2">
  <img src="3.jpg" alt="image3">
</div>
<script>
var slider = document.getElementById('slider');
var images = slider.getElementsByTagName('img');
var current = 0;
var startX, endX;
slider.addEventListener('touchstart', function(event) {
  startX = event.touches[0].clientX;
});
slider.addEventListener('touchmove', function(event) {
  endX = event.touches[0].clientX;
  event.preventDefault();
});
slider.addEventListener('touchend', function(event) {
  if (endX - startX > 50) {
    images[current].style.opacity = 0;
    current = (current - 1 + images.length) % images.length;
    images[current].style.opacity = 1;
    slider.style.left = '-' + current + '00%';
  } else if (startX - endX > 50) {
    images[current].style.opacity = 0;
    current = (current + 1) % images.length;
    images[current].style.opacity = 1;
    slider.style.left = '-' + current + '00%';
  }
});

function autoPlay() {
  images[current].style.opacity = 0;
  current = (current + 1) % images.length;
  images[current].style.opacity = 1;
  slider.style.left = '-' + current + '00%';
}

setInterval(autoPlay, 2000);
</script>

以上就是原生JS实现简单轮播图的完整攻略。