CSS+JS 堆叠图片动态交互切换

结合DeepSeek提供的代码,终于实现了堆叠两张图片动态循环切换,以下是代码:

通过绝对定位放了两张图片

复制代码
<div class="col-lg-5" style="z-index: 40; position: relative;">
	<img src="images/banner_1.png" class="shadow_fa img1"
		style="width: 480px; height:480px; position: absolute; top: 15%; left:16%; z-index: 10;">
	<img src="images/banner_2.png" class="shadow_fa img2"
		style="width: 480px; height:480px; position: absolute; top: 7%; left:24%; z-index: 9;">
</div>

然后是CSS代码部分

dart 复制代码
<style type="text/css">
	.shadow_fa {
	   /* 所有变化属性均触发动画 */
	   transition: all 1s ease-in-out;
	 }
</style>

然后是js代码

dart 复制代码
<script>
	// 获取两张图片
	const img1 = document.querySelector('.img1');
	const img2 = document.querySelector('.img2');
	
	function swapImages() {
	  // 临时存储图片1的样式
	  const tempTop = img1.style.top;
	  const tempLeft = img1.style.left;
	  const tempZIndex = img1.style.zIndex;
	  const tempOpacity = img1.style.opacity;
	
	  // 将图片1的样式设置为图片2的当前值
	  img1.style.top = img2.style.top;
	  img1.style.left = img2.style.left;
	  img1.style.zIndex = img2.style.zIndex;
	  img1.style.opacity = img2.style.opacity;
	
	  // 将图片2的样式设置为图片1的原始值
	  img2.style.top = tempTop;
	  img2.style.left = tempLeft;
	  img2.style.zIndex = tempZIndex;
	  img2.style.opacity = tempOpacity;
	
	  // 强制触发浏览器重绘(关键代码)
	  void img1.offsetWidth;
	}
	
	// 每5秒执行一次
	setInterval(swapImages, 5000);
</script>

QQ2025325-113356

相关推荐
gnip14 分钟前
链式调用和延迟执行
前端·javascript
SoaringHeart25 分钟前
Flutter组件封装:页面点击事件拦截
前端·flutter
杨天天.27 分钟前
小程序原生实现音频播放器,下一首上一首切换,拖动进度条等功能
前端·javascript·小程序·音视频
Dragon Wu37 分钟前
React state在setInterval里未获取最新值的问题
前端·javascript·react.js·前端框架
Jinuss38 分钟前
Vue3源码reactivity响应式篇之watch实现
前端·vue3
YU大宗师41 分钟前
React面试题
前端·javascript·react.js
木兮xg41 分钟前
react基础篇
前端·react.js·前端框架
ssshooter1 小时前
你知道怎么用 pnpm 临时给某个库打补丁吗?
前端·面试·npm
IT利刃出鞘2 小时前
HTML--最简的二级菜单页面
前端·html
yume_sibai2 小时前
HTML HTML基础(4)
前端·html