原生JS改变透明度实现轮播效果

好的！原生JS改变透明度实现轮播效果的攻略如下：

一、准备工作

在HTML文件中创建一个包含图片的轮播容器，如下所示：

<div class="slider">
  <img src="./image1.jpg" alt="image1">
  <img src="./image2.jpg" alt="image2">
  <img src="./image3.jpg" alt="image3">
</div>

在CSS中为这个轮播容器添加样式，包括宽度、高度、overflow等属性，使得轮播效果可以正常展现，如下所示：

.slider {
  width: 600px;
  height: 400px;
  overflow: hidden;
}

二、JS实现透明度轮播

在JS中获取轮播容器及其中所有图片的引用，如下所示：

const slider = document.querySelector('.slider');
const sliderImgs = document.querySelectorAll('.slider img');

设置一些常量，如轮播间隔时间、图片透明度变化速度等，如下所示：

const intervalTime = 3000; // 轮播间隔时间为3秒
const opacityChangeSpeed = 0.05; // 图片透明度变化速度为5%

创建一个轮播计数器、一个当前图片索引变量、一个变化方向变量，如下所示：

let slideCount = 1; // 轮播计数器
let currentImgIndex = 0; // 当前图片索引
let direction = 'up'; // 变化方向

在轮播函数中，根据变化方向对当前图片进行透明度变化，如下所示：

function slide() {
  // 判断变化方向
  if (direction === 'up') {
    // 图片透明度增加
    sliderImgs[currentImgIndex].style.opacity = Number(sliderImgs[currentImgIndex].style.opacity) + opacityChangeSpeed;
  } else {
    // 图片透明度减小
    sliderImgs[currentImgIndex].style.opacity = Number(sliderImgs[currentImgIndex].style.opacity) - opacityChangeSpeed;
  }

  // 判断图片透明度变化是否完成
  if (sliderImgs[currentImgIndex].style.opacity >= 1) {
    // 轮播计数器加1
    slideCount++;
    // 判断轮播计数器是否达到了最大值
    if (slideCount > sliderImgs.length) {
      // 重置轮播计数器为1
      slideCount = 1;
    }
    // 更新当前图片索引
    currentImgIndex = slideCount - 1;
    // 变化方向改变
    direction = 'down';
  } else if (sliderImgs[currentImgIndex].style.opacity <= 0) {
    // 变化方向改变
    direction = 'up';
  }

  // 继续执行轮播函数，形成循环
  setTimeout(slide, intervalTime/100);
}

在轮播函数中，更新其他图片的透明度为0，保证只有当前图片透明度在变化，如下所示：

// 更新其他图片的透明度为0
for (let i = 0; i < sliderImgs.length; i++) {
  if (i !== currentImgIndex) {
    sliderImgs[i].style.opacity = 0;
  }
}

在页面加载完成后，调用轮播函数开始轮播，如下所示：

window.onload = function() {
  slide();
}

完整代码示例：

const slider = document.querySelector('.slider');
const sliderImgs = document.querySelectorAll('.slider img');
const intervalTime = 3000; // 轮播间隔时间为3秒
const opacityChangeSpeed = 0.05; // 图片透明度变化速度为5%
let slideCount = 1; // 轮播计数器
let currentImgIndex = 0; // 当前图片索引
let direction = 'up'; // 变化方向

function slide() {
  if (direction === 'up') {
    sliderImgs[currentImgIndex].style.opacity = Number(sliderImgs[currentImgIndex].style.opacity) + opacityChangeSpeed;
  } else {
    sliderImgs[currentImgIndex].style.opacity = Number(sliderImgs[currentImgIndex].style.opacity) - opacityChangeSpeed;
  }

  if (sliderImgs[currentImgIndex].style.opacity >= 1) {
    slideCount++;
    if (slideCount > sliderImgs.length) {
      slideCount = 1;
    }
    currentImgIndex = slideCount - 1;
    direction = 'down';
  } else if (sliderImgs[currentImgIndex].style.opacity <= 0) {
    direction = 'up';
  }

  for (let i = 0; i < sliderImgs.length; i++) {
    if (i !== currentImgIndex) {
      sliderImgs[i].style.opacity = 0;
    }
  }

  setTimeout(slide, intervalTime/100);
}

window.onload = function() {
  slide();
}

三、示例说明

示例一

页面中有一个轮播容器，包含三张图片，分别为：image1、image2、image3。轮播间隔时间为5秒，透明度变化速度为3%。

<div class="slider">
  <img src="./image1.jpg" alt="image1">
  <img src="./image2.jpg" alt="image2">
  <img src="./image3.jpg" alt="image3">
</div>

.slider {
  width: 800px;
  height: 600px;
  overflow: hidden;
}

const slider = document.querySelector('.slider');
const sliderImgs = document.querySelectorAll('.slider img');
const intervalTime = 5000; // 轮播间隔时间为5秒
const opacityChangeSpeed = 0.03; // 图片透明度变化速度为3%
let slideCount = 1; // 轮播计数器
let currentImgIndex = 0; // 当前图片索引
let direction = 'up'; // 变化方向

function slide() {
  if (direction === 'up') {
    sliderImgs[currentImgIndex].style.opacity = Number(sliderImgs[currentImgIndex].style.opacity) + opacityChangeSpeed;
  } else {
    sliderImgs[currentImgIndex].style.opacity = Number(sliderImgs[currentImgIndex].style.opacity) - opacityChangeSpeed;
  }

  if (sliderImgs[currentImgIndex].style.opacity >= 1) {
    slideCount++;
    if (slideCount > sliderImgs.length) {
      slideCount = 1;
    }
    currentImgIndex = slideCount - 1;
    direction = 'down';
  } else if (sliderImgs[currentImgIndex].style.opacity <= 0) {
    direction = 'up';
  }

  for (let i = 0; i < sliderImgs.length; i++) {
    if (i !== currentImgIndex) {
      sliderImgs[i].style.opacity = 0;
    }
  }

  setTimeout(slide, intervalTime/100);
}

window.onload = function() {
  slide();
}

示例二

页面中有一个轮播容器，包含四张图片，分别为：image1、image2、image3、image4。轮播间隔时间为2秒，透明度变化速度为10%。

<div class="slider">
  <img src="./image1.jpg" alt="image1">
  <img src="./image2.jpg" alt="image2">
  <img src="./image3.jpg" alt="image3">
  <img src="./image4.jpg" alt="image4">
</div>

.slider {
  width: 400px;
  height: 300px;
  overflow: hidden;
}

const slider = document.querySelector('.slider');
const sliderImgs = document.querySelectorAll('.slider img');
const intervalTime = 2000; // 轮播间隔时间为2秒
const opacityChangeSpeed = 0.1; // 图片透明度变化速度为10%
let slideCount = 1; // 轮播计数器
let currentImgIndex = 0; // 当前图片索引
let direction = 'up'; // 变化方向

function slide() {
  if (direction === 'up') {
    sliderImgs[currentImgIndex].style.opacity = Number(sliderImgs[currentImgIndex].style.opacity) + opacityChangeSpeed;
  } else {
    sliderImgs[currentImgIndex].style.opacity = Number(sliderImgs[currentImgIndex].style.opacity) - opacityChangeSpeed;
  }

  if (sliderImgs[currentImgIndex].style.opacity >= 1) {
    slideCount++;
    if (slideCount > sliderImgs.length) {
      slideCount = 1;
    }
    currentImgIndex = slideCount - 1;
    direction = 'down';
  } else if (sliderImgs[currentImgIndex].style.opacity <= 0) {
    direction = 'up';
  }

  for (let i = 0; i < sliderImgs.length; i++) {
    if (i !== currentImgIndex) {
      sliderImgs[i].style.opacity = 0;
    }
  }

  setTimeout(slide, intervalTime/100);
}

window.onload = function() {
  slide();
}

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原生JS改变透明度实现轮播效果 - Python技术站