不间断滚动图片效果
要实现一个不间断滚动的图片效果,可以使用HTML、CSS和JavaScript来完成。以下是一个简单的示例代码: ### HTML部分: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>不间断滚动图片</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="scroll-container"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> <img src="image4.jpg" alt="Image 4"> <img src="image5.jpg" alt="Image 5"> </div> <script src="script.js"></script> </body> </html> ``` ### CSS部分 (`styles.css`): ```css body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; } .scroll-container { width: 100%; overflow: hidden; white-space: nowrap; position: relative; } .scroll-container img { width: 200px; /* 图片宽度 */ height: auto; display: inline-block; margin-right: 10px; } ``` ### JavaScript部分 (`script.js`): ```javascript document.addEventListener("DOMContentLoaded", function() { const container = document.querySelector(\'.scroll-container\'); let scrollPosition = 0; function scrollImages() { scrollPosition += 1; // 每次滚动1像素 container.style.transform = `translateX(-${scrollPosition}px)`; // 如果图片完全滚动完,重置位置 if (scrollPosition >= container.offsetWidth) { scrollPosition = 0; } } setInterval(scrollImages, 10); // 每10毫秒滚动一次 }); ``` ### 解释: 1. **HTML部分**:创建了一个包含多张图片的容器,并通过`<img>`标签加载图片。 2. **CSS部分**:设置了容器为水平滚动模式,并隐藏了超出容器的部分内容。图片的宽度和间距可以通过修改CSS样式进行调整。 3. **JavaScript部分**:通过`setInterval`函数每10毫秒调用一次`scrollImages`函数,使图片容器向左平移,从而实现滚动效果。当图片完全滚动完后,重置位置以实现不间断滚动。 你可以根据需要调整图片的大小、滚动速度等参数。