原生JS实现图片轮播切换效果

下面是“原生JS实现图片轮播切换效果”的完整攻略。

什么是图片轮播切换效果？

图片轮播切换效果是指在网页上展示一组图片，并在规定的时间间隔内自动切换图片或者在用户交互的作用下手动切换图片。图片轮播切换效果是Web前端页面设计中常用的一个功能。

使用原生JS实现图片轮播切换效果，需要做哪些工作？

使用原生JS实现图片轮播切换效果需要做以下几个步骤：

1. 创建包含多个图片的HTML结构，并通过CSS样式对其进行布局和样式设置；
2. 通过JS获取需要操作的DOM元素，例如图片容器、图片列表、左右切换按钮等；
3. 给左右切换按钮绑定事件，实现图片的手动切换；
4. 使用定时器设置图片自动切换功能；
5. 编写JS函数实现图片的切换和初始化等功能。

示例一：原生JS实现基本图片轮播切换效果

以下代码实现了一个基本的图片轮播切换效果。点击左右切换按钮可以切换图片。其中，container为图片容器，imgs为图片列表，prev为上一页按钮，next为下一页按钮。该示例采用定位和透明度变化方案，使当前图片逐渐出现，未选中图片逐渐消失的效果。

<div class="container">
  <img src="img1.jpg" />
  <img src="img2.jpg" />
  <img src="img3.jpg" />
  <img src="img4.jpg" />
</div>

<button class="prev">上一页</button>
<button class="next">下一页</button>

.container {
  position: relative;
}

.container img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

.container img.active {
  opacity: 1;
}

.prev,
.next {
  position: absolute;
  top: 50%;
  margin-top: -20px;
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.3);
  border: none;
  color: #fff;
  cursor: pointer;
}

.prev {
  left: 0;
}

.next {
  right: 0;
}

var container = document.querySelector('.container');
var imgs = container.querySelectorAll('img');
var prev = document.querySelector('.prev');
var next = document.querySelector('.next');

var activeIndex = 0;
var timer = null;

function setActive(index) {
  for (var i = 0; i < imgs.length; i++) {
    imgs[i].classList.remove('active');
  }
  imgs[index].classList.add('active');
}

function showPrev() {
  activeIndex--;
  if (activeIndex < 0) {
    activeIndex = imgs.length - 1;
  }
  setActive(activeIndex);
}

function showNext() {
  activeIndex++;
  if (activeIndex >= imgs.length) {
    activeIndex = 0;
  }
  setActive(activeIndex);
}

prev.addEventListener('click', function() {
  showPrev();
});

next.addEventListener('click', function() {
  showNext();
});

setActive(activeIndex);

timer = setInterval(function() {
  showNext();
}, 3000);

示例二：原生JS实现无限循环图片轮播切换

以下代码实现了无限循环图片轮播切换。在左右切换时，可以实现无限循环切换。

<div class="container">
  <img src="img1.jpg" />
  <img src="img2.jpg" />
  <img src="img3.jpg" />
  <img src="img4.jpg" />
  <img src="img1.jpg" />
  <img src="img2.jpg" />
  <img src="img3.jpg" />
  <img src="img4.jpg" />
</div>

<button class="prev">上一页</button>
<button class="next">下一页</button>

.container {
  position: relative;
  width: 400%;
  transform: translateX(0);
}

.container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 25%;
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
}

.container img.active {
  opacity: 1;
  transform: translateX(-25%);
}

.prev,
.next {
  position: absolute;
  top: 50%;
  margin-top: -20px;
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.3);
  border: none;
  color: #fff;
  cursor: pointer;
}

.prev {
  left: 0;
}

.next {
  right: 0;
}

var container = document.querySelector('.container');
var imgs = container.querySelectorAll('img');
var prev = document.querySelector('.prev');
var next = document.querySelector('.next');

var activeIndex = 0;
var timer = null;

function setActive(index) {
  for (var i = 0; i < imgs.length; i++) {
    imgs[i].classList.remove('active');
  }
  imgs[index].classList.add('active');
}

function showPrev() {
  activeIndex--;
  if (activeIndex < 0) {
    activeIndex = imgs.length / 4 - 1;
  }
  container.style.transform = 'translateX(-' + activeIndex * 25 + '%)';
  setActive(activeIndex);
}

function showNext() {
  activeIndex++;
  if (activeIndex >= imgs.length / 4) {
    activeIndex = 0;
  }
  container.style.transform = 'translateX(-' + activeIndex * 25 + '%)';
  setActive(activeIndex);
}

prev.addEventListener('click', function() {
  showPrev();
});

next.addEventListener('click', function() {
  showNext();
});

setActive(activeIndex);

timer = setInterval(function() {
  showNext();
}, 3000);

以上就是使用原生JS实现图片轮播切换效果的完整攻略。