首页实现图片的从右到左无缝滚动，每隔0.5毫秒实现一次左移，当鼠标移动到图片上触发图片停止滚动，否则图片继续滚动

实现图片的从右到左无缝滚动，每隔0.5毫秒实现一次左移，当鼠标移动到图片上触发图片停止滚动，否则图片继续滚动

时间: 2024-10-25 20:18:03 浏览: 22

实现图片从右到左无缝滚动，可以使用JavaScript的CSS动画和事件监听功能。首先，你需要设置HTML中的图片元素，然后使用CSS将其定位在右侧并添加一个宽度溢出的背景图，使其看起来是从右边开始。接着，你可以创建一个JavaScript定时器，每隔0.5毫秒调用一个函数，这个函数会改变图片的`transform: translateX()`属性，使其向左平移。当鼠标悬停在图片上时，需要添加一个mouseover事件监听器，捕获该事件并清除定时器，让图片停止滚动。这是一个简单的示例： ```html <!DOCTYPE html> <html lang="en"> <head> <style> .image-container { position: relative; overflow: hidden; } .right-to-left-image { position: absolute; right: 0; width: 200%; /* 溢出部分隐藏 */ animation: slide 0.5s infinite; } @keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } </style> </head> <body> <div class="image-container"> <img src="your-image-url" alt="Right to left image" class="right-to-left-image"> </div> <script> let isDragging = false; function scrollImage() { const img = document.querySelector('.right-to-left-image'); if (!isDragging) { img.style.transform = 'translateX(-=10px)'; } } window.addEventListener('mousemove', function(e) { if (e.target.classList.contains('right-to-left-image')) { isDragging = true; clearInterval(scrollTimer); } else { isDragging = false; } }); // 每隔0.5毫秒滚动 const scrollTimer = setInterval(scrollImage, 500); </script> </body> </html> ``` 在这个例子中，当用户鼠标离开图片区域，`isDragging`变量会被设置为`true`，清除定时器，停止滚动。反之，如果鼠标回到图片上，`isDragging`变回`false`，动画继续执行。

阅读全文