<!DOCTYPE html> <head> </head> <body> <div id="imageContainer" class="div-img"> <img id="ImageA" src="image1.jpg" alt="Image"> <img id="ImageB" src="image2.jpg" alt="Image"> </div> </body> <style> #ImageA, #ImageB { position: absolute; top: 0; left: 0; transition: opacity 1s; opacity: 0; height: 400px; width: 800px; object-fit: cover; } </style> <script> let images = ['image1.jpg', 'image2.jpg', 'image3.jpg']; let ImageIndex = 0; let fadeDuration = 1000; let times = 2000; let ImageAElement = document.getElementById('ImageA'); let ImageBElement = document.getElementById('ImageB'); function changeImageA() { ImageAElement.style.opacity = 1; ImageBElement.style.opacity = 0; setTimeout(() => { ImageIndex = (ImageIndex + 1) % images.length; ImageBElement.src = images[ImageIndex]; }, fadeDuration); setTimeout(() => { changeImageB() }, times); } function changeImageB() { ImageBElement.style.opacity = 1; ImageAElement.style.opacity = 0; setTimeout(() => { ImageIndex = (ImageIndex + 1) % images.length; ImageAElement.src = images[ImageIndex]; }, fadeDuration); setTimeout(() => { changeImageA() }, times); } changeImageA() </script>
多张图片淡入淡出切换
最新推荐文章于 2024-04-25 17:53:36 发布