原生js实现轮播图的示例代码

让我们一步步讲解如何使用原生JS实现轮播图。在开始之前，请确保你已经了解了HTML、CSS和基础的JavaScript知识。

1. HTML结构

首先，我们需要在HTML文件中创建我们的轮播图结构。下面是一个基本的例子：

<div class="slider">
  <div class="slides">
    <div class="slide">
      <img src="http://placehold.it/1000x500">
    </div>
    <div class="slide">
      <img src="http://placehold.it/1000x500">
    </div>
    <div class="slide">
      <img src="http://placehold.it/1000x500">
    </div>
  </div>
</div>

在这个例子中，我们创建了一个带有三个幻灯片的轮播图，每个幻灯片都包含一个图像。我们通过一个带有“slides”类名的父元素来包含这些幻灯片，并将其添加到一个带有“slider”类名的容器中。

2. CSS样式

接下来，我们需要用CSS样式来使我们的轮播图看起来更像一个轮播图。下面是一个基本的 CSS 样式：

.slider {
  width: 1000px;
  margin: 0 auto;
  position: relative;
}

.slides {
  width: 3000px;
  position: absolute;
  top: 0;
  left: 0;
}

.slide {
  width: 1000px;
  float: left;
}

在这个例子中，我们将轮播图的宽度设置为1000像素，然后将其居中放置。我们还将幻灯片容器的宽度设置为三倍的轮播图宽度，以便我们可以在轮播图中滚动幻灯片。最后，我们使幻灯片容器相对定位，使幻灯片能够出现在轮播图中心，使幻灯片向左浮动，以便在将幻灯片添加到轮播图时它们会排成一排。

3. JavaScript代码

接下来，我们需要使用 JavaScript 代码实现轮播图的滚动。我们需要从页面中获取幻灯片容器并将其向左移动。可以使用 CSS 的“left”属性来完成这个动作。然后需要创建一个计时器，以便幻灯片容器在固定的时间间隔内滚动到下一个幻灯片。下面是 JavaScript 代码的示例：

var slider = document.querySelector('.slider');
var slides = document.querySelector('.slides');
var slide = document.querySelectorAll('.slide');
var index = 0;

function nextSlide() {
  slides.style.transition = "all .5s ease-in-out";
  index++;
  slides.style.left = (-index * 1000) + "px";
  if (index == slide.length - 1) {
    setTimeout(function() {
      slides.style.transition = "none";
      index = 0;
      slides.style.left = 0;
    }, 500);
  }
}

setInterval(nextSlide, 3000);

在此示例中，我们首先使用 querySelector 和 querySelectorAll 方法获取轮播图的容器和幻灯片。然后，我们定义了一个 nextSlide() 函数，它将幻灯片向左移动1000像素并将过渡效果应用于幻灯片容器。我们还增加了一个计数器以跟踪目前显示的幻灯片。当计数器达到最后一张幻灯片时，我们将容器移到左边，并在500毫秒后将计数器重置为0。

最后，我们使用 JavaScript 中的 setInterval() 函数来定期调用 nextSlide() 函数。在本例中，幻灯片将在3秒后自动滚动到下一个幻灯片。

4. 示例说明

示例1：使用箭头键切换幻灯片

在本示例中，我们将在 keyup 事件上添加一个事件监听器，以便我们调用 nextSlide() 函数来切换幻灯片。

window.addEventListener('keyup', function(e) {
  if (e.keyCode === 37) {
    // left arrow key
    index--;
    slides.style.transition = "all .5s ease-in-out";
    slides.style.left = (-index * 1000) + "px";
  } else if (e.keyCode === 39) {
    // right arrow key
    nextSlide();
  }
});

在这个示例中，我们增加了一个事件监听器，在每次按键松开时检查按键的代码，如果是左箭头键，我们将计数器减去1，并向左滚动容器；如果是右箭头键，则调用 nextSlide() 函数滚动到下一张幻灯片。

示例2：自动播放和停止

在本示例中，我们将增加一个按钮，点击该按钮时停止自动播放，点击该按钮再次开始自动播放。下面是代码示例：

<button id="stop">Stop</button>

JavaScript代码：

var intervalId = null;
var stopBtn = document.getElementById('stop');

stopBtn.addEventListener('click', function() {
  if (intervalId === null) {
    intervalId = setInterval(nextSlide, 3000);
    stopBtn.innerHTML = "Stop";
  } else {
    clearInterval(intervalId);
    intervalId = null;
    stopBtn.innerHTML = "Start";
  }
});

在这个示例中，我们创建了一个变量 intervalId 来存储 setInterval() 函数的返回值。当用户单击“停止”按钮时，我们检查 intervalId 变量的值。如果为 null，则启动自动播放功能并将按钮文本更改为“停止”。如果 intervalId 变量不为 null，则停止自动播放功能并将按钮文本更改为“开始”。

本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！

原生js实现轮播图的示例代码

1. HTML结构

2. CSS样式

3. JavaScript代码

4. 示例说明

相关文档推荐