原生js实现网易轮播图效果

请允许我从以下几个方面详细讲解“原生JS实现网易轮播图效果”的完整攻略。

一、基本思路

网易轮播图效果涉及到图片自动切换和手动点击按钮切换两种方式。其基本思路如下：

页面初始化时，将轮播图图片都放置在容器内，然后只显示第一张图片。
利用定时器，定时调用一个函数，进行图片自动切换。
增加两个按钮，分别用于向左和向右切换图片。
给这两个按钮添加事件监听，当按钮被点击时，通过改变当前显示图片的下标，展示需要切换的图片。

二、具体实现

1. HTML结构

首先，在HTML代码中创建一个轮播图容器，并在容器中添加轮播图图片和切换按钮。

<div class="carousel">
  <img src="img/1.jpg" alt="">
  <img src="img/2.jpg" alt="">
  <img src="img/3.jpg" alt="">
  <img src="img/4.jpg" alt="">
  <img src="img/5.jpg" alt="">
  <div class="prev"></div>
  <div class="next"></div>
</div>

2. CSS样式

为了让页面更加美观，保证轮播图的基本样式，我们可以给每一张轮播图图片添加CSS样式。同时，设置轮播图容器的宽高及定位方式。

.carousel {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
  margin: 0 auto;
}

.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.5s;
}

.carousel img.show {
  opacity: 1;
}

.carousel .prev,
.carousel .next {
  position: absolute;
  top: 50%;
  margin-top: -30px;
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  cursor: pointer;
}

.carousel .prev {
  left: 10px;
  border-right: 30px solid #fff;
}

.carousel .next {
  right: 10px;
  border-left: 30px solid #fff;
  transform: rotate(180deg);
}

3. JS代码

接下来是JS代码的实现过程。

在JS代码中，首先获取到轮播图容器及其中的图片和按钮等元素，并设置当前展示的轮播图图片的下标。

const carousel = document.querySelector('.carousel') // 轮播图容器
const imgs = document.querySelectorAll('.carousel img') // 所有轮播图图片
const prev = document.querySelector('.prev') // 向前切换按钮
const next = document.querySelector('.next') // 向后切换按钮

let curIndex = 0 // 当前展示的轮播图图片下标

然后，对于图片自动切换功能的实现，我们可以使用以下代码：

// 图片自动切换功能
setInterval(() => {
  // 隐藏当前轮播图图片
  imgs[curIndex].classList.remove('show')
  // 取模运算实现循环切换功能
  curIndex = (curIndex + 1) % imgs.length
  // 显示下一张轮播图图片
  imgs[curIndex].classList.add('show')
}, 3000)

上述代码中的setInterval()方法会每隔一定时间调用一次函数，进行图片的自动切换。我们在其中先将当前展示的轮播图图片隐藏，然后对下一张轮播图图片的下标进行取模运算，从而实现轮播图的循环播放。最后，展示下一张轮播图图片。

最后，我们还需要添加向左和向右切换图片的按钮功能实现。具体代码如下：

// 向左切换图片按钮
prev.addEventListener('click', () => {
  // 隐藏当前轮播图图片
  imgs[curIndex].classList.remove('show')
  // 根据按钮切换到上一张图片
  curIndex = (imgs.length + curIndex - 1) % imgs.length
  // 显示上一张轮播图图片
  imgs[curIndex].classList.add('show')
})

// 向右切换图片按钮
next.addEventListener('click', () => {
  // 隐藏当前轮播图图片
  imgs[curIndex].classList.remove('show')
  // 根据按钮切换到下一张图片
  curIndex = (curIndex + 1) % imgs.length
  // 显示下一张轮播图图片
  imgs[curIndex].classList.add('show')
})

上述代码中的addEventListener()方法添加了按钮的事件监听，当点击按钮时，会执行对应的函数。我们先将当前展示的轮播图图片隐藏，然后根据点击的按钮切换到上一张或下一张轮播图图片。最后，展示对应的轮播图图片。

4. 示例说明

以下两个示例均为原生JS实现网易轮播图效果，可供参考：

示例一：基于ES5的实现

var carousel = document.querySelector('.carousel') // 轮播图容器
var imgs = document.querySelectorAll('.carousel img') // 所有轮播图图片
var prev = document.querySelector('.prev') // 向前切换按钮
var next = document.querySelector('.next') // 向后切换按钮

var curIndex = 0 // 当前展示的轮播图图片下标

// 图片自动切换功能
setInterval(function() {
  // 隐藏当前轮播图图片
  imgs[curIndex].classList.remove('show')
  // 取模运算实现循环切换功能
  curIndex = (curIndex + 1) % imgs.length
  // 显示下一张轮播图图片
  imgs[curIndex].classList.add('show')
}, 3000)

// 向左切换图片按钮
prev.addEventListener('click', function() {
  // 隐藏当前轮播图图片
  imgs[curIndex].classList.remove('show')
  // 根据按钮切换到上一张图片
  curIndex = (imgs.length + curIndex - 1) % imgs.length
  // 显示上一张轮播图图片
  imgs[curIndex].classList.add('show')
})

// 向右切换图片按钮
next.addEventListener('click', function() {
  // 隐藏当前轮播图图片
  imgs[curIndex].classList.remove('show')
  // 根据按钮切换到下一张图片
  curIndex = (curIndex + 1) % imgs.length
  // 显示下一张轮播图图片
  imgs[curIndex].classList.add('show')
})

示例二：基于ES6的实现

const carousel = document.querySelector('.carousel') // 轮播图容器
const imgs = document.querySelectorAll('.carousel img') // 所有轮播图图片
const prev = document.querySelector('.prev') // 向前切换按钮
const next = document.querySelector('.next') // 向后切换按钮

let curIndex = 0 // 当前展示的轮播图图片下标

// 图片自动切换功能
setInterval(() => {
  // 隐藏当前轮播图图片
  imgs[curIndex].classList.remove('show')
  // 取模运算实现循环切换功能
  curIndex = (curIndex + 1) % imgs.length
  // 显示下一张轮播图图片
  imgs[curIndex].classList.add('show')
}, 3000)

// 向左切换图片按钮
prev.addEventListener('click', () => {
  // 隐藏当前轮播图图片
  imgs[curIndex].classList.remove('show')
  // 根据按钮切换到上一张图片
  curIndex = (imgs.length + curIndex - 1) % imgs.length
  // 显示上一张轮播图图片
  imgs[curIndex].classList.add('show')
})

// 向右切换图片按钮
next.addEventListener('click', () => {
  // 隐藏当前轮播图图片
  imgs[curIndex].classList.remove('show')
  // 根据按钮切换到下一张图片
  curIndex = (curIndex + 1) % imgs.length
  // 显示下一张轮播图图片
  imgs[curIndex].classList.add('show')
})

以上就是基于原生JS实现网易轮播图效果的完整攻略，希望对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原生js实现网易轮播图效果 - Python技术站