原生JS实现移动端web轮播图详解（结合Tween算法造轮子）

下面是 "原生JS实现移动端web轮播图详解（结合Tween算法造轮子）" 的完整攻略：

概述

移动端web轮播图十分常见，本文将利用原生JavaScript实现一款移动端web轮播图，并采用Tween算法实现动画效果。

实现步骤

步骤一：HTML结构

首先，我们需要在HTML中创建一个轮播图的容器，并在其中添加若干个图片元素，如下所示：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="1.jpg">
    </div>
    <div class="swiper-slide">
      <img src="2.jpg">
    </div>
    <div class="swiper-slide">
      <img src="3.jpg">
    </div>
  </div>
</div>

步骤二：CSS样式

接着，我们需要为轮播图的容器和图片添加CSS样式，如下所示：

.swiper-container {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.swiper-wrapper {
  width: 300%;
  height: 100%;
  display: flex;
  transition: transform 0.3s;
  transform: translate3d(-100%, 0, 0);
}

.swiper-slide {
  width: 33.3333%;
  height: 100%;
  flex-shrink: 0;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

其中，.swiper-container是轮播图的容器，设置了宽度和高度，并将overflow属性设为了hidden；.swiper-wrapper是图片容器，设置了宽度为3倍容器宽度，并通过flex布局实现图片排列；.swiper-slide是每一张图片的容器，定义了宽度和高度，并设置了flex-shrink属性可以实现自适应；.swiper-slide img是图片元素，通过object-fit属性实现图片的自适应。

步骤三：JavaScript代码

接下来，我们开始编写JavaScript代码。

3.1 获取DOM元素

首先，我们需要获取HTML中的DOM元素，包括轮播图容器、图片容器和每一张图片，代码如下：

let container = document.querySelector('.swiper-container');
let wrapper = document.querySelector('.swiper-wrapper');
let slides = document.querySelectorAll('.swiper-slide');

3.2 初始化轮播图

接着，我们需要对轮播图进行初始化，如下所示：

let index = 1;
let timer = null;
let isAnimating = false;

slides[0].classList.add('active');

其中，index表示当前显示的图片索引，timer用于存储自动轮播的定时器，isAnimating表示当前是否正在进行动画。同时，我们将第一张图片设为active状态。

3.3 实现轮播功能

在实现轮播功能时，我们采用Tween算法，具体实现如下：

function animate(offset) {
  let time = 300;  // 动画持续时间
  let interval = 10;  // 每帧间隔时间
  let speed = offset / (time / interval);  // 计算每帧移动距离
  let targetLeft = parseFloat(getComputedStyle(wrapper).getPropertyValue('transform').split(',')[4]) + offset;  // 计算目标位置
  let currLeft = parseFloat(getComputedStyle(wrapper).getPropertyValue('transform').split(',')[4]);  // 记录当前位置
  isAnimating = true;  // 标记动画进行中

  let timer = setInterval(() => {
    if ((speed > 0 && parseFloat(getComputedStyle(wrapper).getPropertyValue('transform').split(',')[4]) < targetLeft) || (speed < 0 && parseFloat(getComputedStyle(wrapper).getPropertyValue('transform').split(',')[4]) > targetLeft)) {
      wrapper.style.transform = `translate3d(${currLeft + speed}px, 0, 0)`;
      currLeft += speed;
    } else {
      wrapper.style.transform = `translate3d(${targetLeft}px, 0, 0)`;
      clearInterval(timer);
      isAnimating = false;  // 标记动画结束
    }
  }, interval);
}

其中，offset为每次轮播的偏移量，time为动画持续时间，interval为每帧间隔时间。根据计算出的偏移量和持续时间，我们可以计算出每帧移动的距离speed，然后通过setInterval函数实现轮播动画。

3.4 实现自动轮播

除了手动切换之外，我们还需要实现自动轮播的功能，代码如下：

function autoPlay() {
  timer = setInterval(() => {
    if (!isAnimating) {
      index++;
      play();
    }
  }, 2000);
}

function stop() {
  clearInterval(timer);
}

function play() {
  if (index === slides.length) {
    index = 1;
  } else if (index === 0) {
    index = slides.length - 1;
  }

  let offset = -100 * (index - 1);
  animate(offset);

  for (let i = 0; i < slides.length; i++) {
    slides[i].classList.remove('active');
  }
  slides[index - 1].classList.add('active');
}

container.addEventListener('touchstart', (event) => {
  stop();
});

container.addEventListener('touchend', (event) => {
  let direction = event.changedTouches[0].pageX - event.touches[0].pageX;
  direction > 0 ? index++ : index--;

  play();
  autoPlay();
});

其中，autoPlay函数用于启动自动轮播，stop函数用于停止自动轮播，play函数实现了手动轮播和切换当前显示图片的active状态。在touchstart事件中，我们需要停止自动轮播，而在touchend事件中，我们需要根据手指滑动的方向来判断当前的图片索引，然后通过play函数实现轮播。

示例说明

下面，我们通过两个示例来说明轮播图的使用方法。

示例一：基本轮播

如果你只需要实现一个基本的移动端web轮播图，可以按照上面的步骤，直接复制代码到你的网站中即可。

示例二：高级轮播

如果你希望实现一个更加高级的移动端web轮播图，可以按照以下步骤进行：

为轮播图添加左右按钮（可选）；
添加动画效果，例如可以采用fade、zoom-in等方式实现。

关于添加左右按钮的具体实现，可以参考以下代码：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="1.jpg">
    </div>
    <div class="swiper-slide">
      <img src="2.jpg">
    </div>
    <div class="swiper-slide">
      <img src="3.jpg">
    </div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-color: rgba(0,0,0,0.3);
  border-radius: 50%;
  cursor: pointer;
}

.swiper-button-prev {
  left: 10px;
}

.swiper-button-next {
  right: 10px;
}

let prevBtn = document.querySelector('.swiper-button-prev');
let nextBtn = document.querySelector('.swiper-button-next');

prevBtn.addEventListener('click', (event) => {
  if (!isAnimating) {
    index--;
    play();
  }
});

nextBtn.addEventListener('click', (event) => {
  if (!isAnimating) {
    index++;
    play();
  }
});

通过上述代码，我们实现了左右按钮的添加和事件绑定。

如果你想要添加动画效果，可以通过修改CSS样式，例如可以将每一个swiper-slide的默认display属性设置为none，利用opacity和transform实现fade效果。

.swiper-slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  opacity: 0;
  z-index: 1;
}

.swiper-slide.active {
  display: block;
  opacity: 1;
  z-index: 2;
  transform: scale(1.2);
  transition: transform 0.5s, opacity 0.5s;
}

通过上述代码，我们实现了fade和zoom-in的效果。在play函数中，我们同时需要修改active状态的添加和删除方式。

function play() {
  if (index === slides.length) {
    index = 1;
  } else if (index === 0) {
    index = slides.length - 1;
  }

  for (let i = 0; i < slides.length; i++) {
    slides[i].classList.remove('active');
    slides[i].style.display = 'none';
  }

  slides[index - 1].style.display = 'block';
  slides[index - 1].classList.add('active');
}

通过以上步骤，你就能够轻松实现一个高级的移动端web轮播图了。

总结

以上就是实现移动端web轮播图的详细攻略。在这个过程中，我们学习了原生JavaScript编程和Tween算法，并通过编写代码实现了移动端web轮播图的所有功能。如果你对轮播图的实现还有其他的疑问，欢迎留言和讨论。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原生JS实现移动端web轮播图详解（结合Tween算法造轮子） - Python技术站