js 自动播放的实例代码

下面是关于JS自动播放的实例代码的攻略。

什么是JS自动播放？

JS自动播放通常指网页上的轮播图、视频以及幻灯片等元素自动播放，用户可以通过点击按钮、鼠标移入移出等操作来控制播放、暂停以及跳转。在网页设计中，JS自动播放是一个非常常见的功能。

实现JS自动播放的步骤

步骤一：编写HTML结构

首先需要编写HTML结构，例如：

<div class="slide-container">
  <div class="slide-item"></div>
  <div class="slide-item"></div>
  <div class="slide-item"></div>
</div>

步骤二：编写CSS样式

为了实现滑动的效果，需要对CSS进行设置，例如：

.slide-container {
  width: 800px;
  height: 400px;
  position: relative;
  overflow: hidden;
}
.slide-item {
  width: 800px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

步骤三：编写JS代码

1. 第一种方法：使用setInterval()函数

setInterval()函数用于按照一定的时间间隔周期性地执行一个函数。我们可以使用它来实现自动播放功能。

let currentIndex = 0;
const items = document.querySelectorAll('.slide-item');
const len = items.length;
const interval = 2000; // 每2秒自动播放一次

const slide = () => {
  items[currentIndex].style.display = 'none'; // 隐藏当前元素
  currentIndex = (currentIndex + 1) % len; // 计算下一张要显示的元素的索引
  items[currentIndex].style.display = 'block'; // 显示下一张元素
}

let timer = setInterval(slide, interval); // 开始自动播放

// 当鼠标移动到容器上时，暂停自动播放
document.querySelector('.slide-container').addEventListener('mouseover', () => clearInterval(timer));

// 当鼠标移出容器时，恢复自动播放
document.querySelector('.slide-container').addEventListener('mouseout', () => timer = setInterval(slide, interval));

1. 第二种方法：使用setTimeout()函数

setTimeout()函数用于在一定的时间之后执行一个函数。我们可以使用它来实现自动播放功能。

let currentIndex = 0;
const items = document.querySelectorAll('.slide-item');
const len = items.length;
const interval = 2000; // 每2秒自动播放一次

const slide = () => {
  items[currentIndex].style.display = 'none'; // 隐藏当前元素
  currentIndex = (currentIndex + 1) % len; // 计算下一张要显示的元素的索引
  items[currentIndex].style.display = 'block'; // 显示下一张元素

  setTimeout(slide, interval); // 继续自动播放
}

slide(); // 开始自动播放

// 当鼠标移动到容器上时，暂停自动播放
document.querySelector('.slide-container').addEventListener('mouseover', () => clearTimeout(timer));

// 当鼠标移出容器时，恢复自动播放
document.querySelector('.slide-container').addEventListener('mouseout', () => slide());

一个示例应用

下面是一个简单的示例，它实现了一个基本的轮播图功能。

HTML代码：

<div class="slide-container">
  <div class="slide-item" style="background-color: red;"></div>
  <div class="slide-item" style="background-color: blue;"></div>
  <div class="slide-item" style="background-color: green;"></div>
  <div class="slide-item" style="background-color: yellow;"></div>
</div>

CSS代码：

.slide-container {
  width: 600px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.slide-item {
  width: 600px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

JS代码：

let currentIndex = 0;
const items = document.querySelectorAll('.slide-item');
const len = items.length;
const interval = 2000;

const slide = () => {
  items[currentIndex].style.display = 'none';
  currentIndex = (currentIndex + 1) % len;
  items[currentIndex].style.display = 'block';
}

let timer = setInterval(slide, interval);

document.querySelector('.slide-container').addEventListener('mouseover', () => clearInterval(timer));
document.querySelector('.slide-container').addEventListener('mouseout', () => timer = setInterval(slide, interval));

另一个示例应用

下面是另一个示例，它实现了一个基本的幻灯片功能。

HTML代码：

<div class="slideshow-container">
  <div class="slideshow-item" style="background-image: url('image1.jpg');"></div>
  <div class="slideshow-item" style="background-image: url('image2.jpg');"></div>
  <div class="slideshow-item" style="background-image: url('image3.jpg');"></div>
</div>

CSS代码：

.slideshow-container {
  width: 600px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.slideshow-item {
  width: 600px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slideshow-item.active {
  opacity: 1;
}

JS代码：

let currentIndex = 0;
const items = document.querySelectorAll('.slideshow-item');
const len = items.length;
const interval = 2000;

const slideshow = () => {
  items[currentIndex].classList.remove('active');
  currentIndex = (currentIndex + 1) % len;
  items[currentIndex].classList.add('active');
}

let timer = setInterval(slideshow, interval);

在这个示例中，我们使用了CSS的transition属性来实现淡入淡出的效果。同时，我们还使用了classList来动态地添加和移除‘active’类，以改变元素的外观。