js实现切换图片时淡入淡出

2023-01-19 11:28| 来源: 网络整理| 查看: 265

废话不说，直接看需求。我们的界面要做成这样，如下图。

图1

当我们点击上边的yab时，可以随意切换图片，并实现淡入淡出。那么要怎样才能实现呢，我们先布局，然后将所有的图片通过定位属性重叠到一起，假设我们点击的是图片而，那么我们将第二张图片的opacity设为1，其他的设为0，0-1，1-0设置一个过度即可。之前我们封装过一个函数，所以我们会直接拿过来使用。 html代码

图片的淡入淡出图片1 图片2 图片3 图片4 ![](img/img1.jpg) ![](img/img2.jpg) ![](img/img3.jpg) ![](img/img4.jpg)

css代码

* { margin: 0; padding: 0; } a { text-align: center; color: #000; text-decoration: none; } #box { width: 400px; height: 250px; margin: 100px auto; } #imgList { position: relative; } #imgList img { width: 400px; height: 250px; position: absolute; left: 0; top: 0; } #tab a { display: inline-block; width: 96px; text-align: center; line-height: 34px; } .firstImg { z-index: 9; } .blackbg { background: #000; color: #fff; } .whitebg { background: #fff; color: #000; }

js代码

//fade.js ↓↓↓↓↓ window.onload = function () { let tab = $("tab"); let tabChildren = tab.children; let imgList = $("imgList"); let imgListChildren = imgList.children; for (let i = 0; i < tabChildren.length; i++) { tabChildren[i].addEventListener("click", function () { tabChildren[i].className = "blackbg"; MotionUtils.fadein(imgListChildren[i]); for (let j = 0; j < tabChildren.length; j++) { if (j !== i) { tabChildren[j].className = "whitebg"; MotionUtils.fadeout(imgListChildren[j]); } } }); } } //utils.js ↓↓↓↓↓ function $(id) { return document.getElementById(id); } function getStyle(element, attr) { let result = element.currentStyle ? element.currentStyle[attr] : getComputedStyle(element, null)[attr]; return Number.parseFloat(result); } let MotionUtils = { /** * * @param obj 要改变的对象 * @param attr 要改变的对象的属性 * @param finalValue 要改变对象的属性的最大值 * @param callback 在上一次运动完后下一次要运动的函数，回调自己 */ bufferMove: function (obj, data, callback) { //清除旧定时器 clearInterval(obj.timer); //开启新定时器 obj.timer = setInterval(function () { //flg标识运动是否完毕 let flg = true; for (let attr in data) { //获得当前obj属性值 let currentValue; if (attr === "opacity") { currentValue = Number.parseFloat(getStyle(obj, attr)) * 100; } else { currentValue = Number.parseInt(getStyle(obj, attr)); } //计算速度 let speed = (data[attr] - currentValue) / 8; //计算物体运动方向 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //计算下一次obj的属性值 let nextValue = currentValue + speed; //设置属性值 if (attr === "opacity") { obj.style[attr] = nextValue / 100; obj.style.filter = "alpha(opacity=" + nextValue + ")"; } else { obj.style[attr] = nextValue + "px"; } //判断当前属性是否运动完毕 if (nextValue !== data[attr]) { flg = false; } } //清除定时器 if (flg) { clearInterval(obj.timer); //如果传了callback，那么就执行这个函数 if (callback) { callback(); } } }, 50); }, fadein: function (element) { let speed = 0.1; clearInterval(element.timer); element.timer = setInterval(function () { let currentOpacity = Number(getStyle(element, "opacity")); if (currentOpacity < 1) { element.style.opacity = currentOpacity + speed; } if (currentOpacity >= 1) { element.style.opacity = 1; clearInterval(element.timer); } }, 50); }, fadeout: function (element) { let speed = 0.1; clearInterval(element.timer); element.timer = setInterval(function () { let currentOpacity = Number(getStyle(element, "opacity")); if (currentOpacity > 0) { element.style.opacity = currentOpacity - speed; } if (currentOpacity

【本文地址】

公司简介

联系我们