首页动态图片自动切换代码

动态图片自动切换代码

时间: 2024-10-25 09:04:24 浏览: 21

动态图片自动切换通常指的是网页、APP或者其他多媒体展示环境中，使用JavaScript或者类似的技术来控制图片序列的自动播放或者轮播。以下是一个简单的HTML和JavaScript代码示例，展示了如何创建一个基本的动态图片轮播： ```html <!DOCTYPE html> <html lang="zh"> <head> <title>动态图片切换</title> <style> .slider { display: flex; transition: background-position 2s ease; } .slider img { width: 100%; height: auto; opacity: 0; } .active { opacity: 1; } </style> </head> <body> <div class="slider" id="imageSlider"> <img src="image1.jpg" class="active"> <img src="image2.jpg"> <img src="image3.jpg"> </div> <script> const slider = document.getElementById('imageSlider'); let currentSlideIndex = 0; function switchSlide() { const slides = slider.querySelectorAll('img'); slides[currentSlideIndex].classList.remove('active'); currentSlideIndex = (currentSlideIndex + 1) % slides.length; // 循环处理 slides[currentSlideIndex].classList.add('active'); slider.style.backgroundImage = `url(${slides[currentSlideIndex].src})`; } setInterval(switchSlide, 3000); // 每隔3秒切换一次 </script> </body> </html> ``` 这个例子中，每隔3秒钟（可以通过调整`setInterval`的时间间隔），就会触发`switchSlide`函数，该函数会从当前活跃图片开始，移除活跃类名，并将下一个图片设为新的活跃图片。背景图像会跟随切换改变。

阅读全文