原生js实现图片层叠轮播切换效果

让我来详细讲解一下“原生js实现图片层叠轮播切换效果”的完整攻略：

1. 准备工作

在开始编写代码之前，需要进行一些准备工作：

1.1 编写 HTML 结构

首先需要编写 HTML 结构，包含轮播图容器、图片容器、轮播点容器等元素，示例代码如下：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="image1.jpg"></div>
    <div class="swiper-slide"><img src="image2.jpg"></div>
    <div class="swiper-slide"><img src="image3.jpg"></div>
  </div>
  <div class="swiper-pagination"></div>
</div>

1.2 初始化样式

为了方便样式的处理，需要先对容器元素进行初始化样式，示例代码如下：

.swiper-container {
  position: relative;
  overflow: hidden;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}
.swiper-slide {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .6s ease-out;
}
.swiper-slide-active {
  opacity: 1;
  z-index: 1;
}

2. 编写 JavaScript

接下来开始编写 JavaScript 代码，实现图片层叠轮播切换效果。

2.1 获取元素

首先需要获取到容器元素、图片容器、轮播点容器等元素，示例代码如下：

const swiperContainer = document.querySelector('.swiper-container');
const swiperWrapper = document.querySelector('.swiper-wrapper');
const swiperSlides = document.querySelectorAll('.swiper-slide');
const pagination = document.querySelector('.swiper-pagination');

2.2 初始化参数

接着需要初始化各种参数，包括图片数量、当前下标、自动轮播间隔时间等，示例代码如下：

const slideCount = swiperSlides.length;
let currentIndex = 0;
let timer = null;
const interval = 3000;

2.3 编写切换函数

然后需要编写图片切换函数，包括切换时的位移、透明度、轮播点等操作，示例代码如下：

function goToSlide(index) {
  if (index < 0) {
    index = slideCount - 1;
  } else if (index >= slideCount) {
    index = 0;
  }
  swiperWrapper.style.transform = `translate3d(-${index * 100}%, 0, 0)`;
  swiperSlides[currentIndex].classList.remove('swiper-slide-active');
  swiperSlides[index].classList.add('swiper-slide-active');
  currentIndex = index;
  updatePagination();
}

2.4 编写自动轮播函数

还需要编写自动轮播函数，实现定时调用图片切换函数，示例代码如下：

function startAutoPlay() {
  timer = setInterval(function() {
    goToSlide(currentIndex + 1);
  }, interval);
}

function stopAutoPlay() {
  clearInterval(timer);
}

2.5 编写轮播点操作函数

最后需要编写轮播点操作函数，实现点击轮播点时切换到对应的图片，示例代码如下：

function updatePagination() {
  pagination.innerHTML = '';
  for (let i = 0; i < slideCount; i++) {
    const li = document.createElement('li');
    li.classList.add('pagination-item');
    if (i === currentIndex) {
      li.classList.add('active');
    }
    li.addEventListener('click', function() {
      stopAutoPlay();
      goToSlide(i);
      startAutoPlay();
    });
    pagination.appendChild(li);
  }
}

3. 完整示例

下面是完整的示例代码，可以直接运行在浏览器中：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>原生js实现图片层叠轮播切换效果</title>
  <style>
    .swiper-container {
      position: relative;
      overflow: hidden;
      width: 500px;
      height: 300px;
    }
    .swiper-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity .6s ease-out;
    }
    .swiper-slide-active {
      opacity: 1;
      z-index: 1;
    }
    .swiper-pagination {
      position: absolute;
      left: 50%;
      bottom: 20px;
      transform: translateX(-50%);
      display: flex;
    }
    .pagination-item {
      margin: 0 10px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #ccc;
      cursor: pointer;
      transition: background .3s ease-out;
    }
    .pagination-item.active {
      background: #333;
    }
  </style>
</head>
<body>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="https://picsum.photos/id/237/500/300"></div>
      <div class="swiper-slide"><img src="https://picsum.photos/id/238/500/300"></div>
      <div class="swiper-slide"><img src="https://picsum.photos/id/239/500/300"></div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

  <script>
    const swiperContainer = document.querySelector('.swiper-container');
    const swiperWrapper = document.querySelector('.swiper-wrapper');
    const swiperSlides = document.querySelectorAll('.swiper-slide');
    const pagination = document.querySelector('.swiper-pagination');

    const slideCount = swiperSlides.length;
    let currentIndex = 0;
    let timer = null;
    const interval = 3000;

    function goToSlide(index) {
      if (index < 0) {
        index = slideCount - 1;
      } else if (index >= slideCount) {
        index = 0;
      }
      swiperWrapper.style.transform = `translate3d(-${index * 100}%, 0, 0)`;
      swiperSlides[currentIndex].classList.remove('swiper-slide-active');
      swiperSlides[index].classList.add('swiper-slide-active');
      currentIndex = index;
      updatePagination();
    }

    function startAutoPlay() {
      timer = setInterval(function() {
        goToSlide(currentIndex + 1);
      }, interval);
    }

    function stopAutoPlay() {
      clearInterval(timer);
    }

    function updatePagination() {
      pagination.innerHTML = '';
      for (let i = 0; i < slideCount; i++) {
        const li = document.createElement('li');
        li.classList.add('pagination-item');
        if (i === currentIndex) {
          li.classList.add('active');
        }
        li.addEventListener('click', function() {
          stopAutoPlay();
          goToSlide(i);
          startAutoPlay();
        });
        pagination.appendChild(li);
      }
    }

    startAutoPlay();
  </script>
</body>
</html>

可以发现，该示例代码实现了图片层叠轮播切换效果，并且提供了自动轮播和轮播点操作的功能，具有较好的用户体验。

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