JS原生实现轮播图的几种方法

JS原生实现轮播图的几种方法

一、通过操作DOM方式实现轮播图

1.1 思路

通过JS操作DOM的方式，在HTML中添加图片的容器，然后在JS中动态地改变图片的位置和透明度

1.2 示例

HTML结构：

<div class="slider">
  <img src="1.jpg" alt="">
  <img src="2.jpg" alt="">
  <img src="3.jpg" alt="">
  <img src="4.jpg" alt="">
</div>

CSS样式：

.slider {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 1;
  transition: all 1s ease-in-out;
}

.slider img.active {
  opacity: 1;
  z-index: 2;
}

JS代码：

var imgList = document.querySelectorAll('.slider img');
var current = 0;

function play() {
  // 隐藏当前图片
  imgList[current].classList.remove('active');
  // 显示下一张图片
  current = (current + 1) % imgList.length;
  imgList[current].classList.add('active');
}

// 每隔2秒自动播放
setInterval(play, 2000);

二、通过Canvas方式实现轮播图

2.1 思路

使用Canvas画布，在画布上绘制图片，然后通过改变图片的位置和透明度实现轮播效果

2.2 示例

HTML结构：

<canvas id="canvas" width="500" height="300"></canvas>

JS代码：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var imgList = ['1.jpg', '2.jpg', '3.jpg', '4.jpg'];
var current = 0;

function play() {
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 显示下一张图片
  var img = new Image();
  img.src = imgList[current];
  img.onload = function() {
    ctx.globalAlpha = 1;
    var x = (canvas.width - img.width) / 2;
    var y = (canvas.height - img.height) / 2;
    ctx.drawImage(img, x, y);
    // 图片逐渐淡出
    fadeOut();
  };
  // 更新当前图片索引
  current = (current + 1) % imgList.length;
}

function fadeOut() {
  var alpha = 1;
  // 每隔10毫秒逐渐减小图片透明度
  var timer = setInterval(function() {
    alpha -= 0.01;
    ctx.globalAlpha = alpha;
    // 如果透明度小于等于0，则停止定时器
    if (alpha <= 0) {
      clearInterval(timer);
      play();
    }
  }, 10);
}

// 自动播放
play();

以上是JS原生实现轮播图的两种常见方式，其他实现方式还包括使用CSS3的动画、使用第三方轮播插件等，可以根据实际需求来选择合适的方式。