js实现图片循环滚动
实现图片循环滚动的JavaScript方法
使用CSS动画结合JavaScript
通过CSS的@keyframes定义动画效果，JavaScript动态控制动画启停和重置。HTML结构中需要将图片横向排列在容器内。
<div class="scroll-container">
<div class="image-track">
<img src="image1.jpg" alt="">
<img src="image2.jpg" alt="">
<!-- 更多图片 -->
</div>
</div>.scroll-container {
width: 100%;
overflow: hidden;
}
.image-track {
display: flex;
animation: scroll 20s linear infinite;
}
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}const track = document.querySelector('.image-track');
// 克隆图片节点实现无缝循环
track.innerHTML += track.innerHTML;
// 鼠标悬停暂停动画
track.addEventListener('mouseenter', () => {
track.style.animationPlayState = 'paused';
});
track.addEventListener('mouseleave', () => {
track.style.animationPlayState = 'running';
});纯JavaScript实现动态滚动
通过定时器动态修改translateX值，适合需要精确控制滚动速度的场景。
const container = document.querySelector('.scroll-container');
const track = document.querySelector('.image-track');
let position = 0;
const speed = 1; // 像素/帧
function animate() {
position -= speed;
if (position <= -track.scrollWidth/2) {
position = 0;
}
track.style.transform = `translateX(${position}px)`;
requestAnimationFrame(animate);
}
animate();使用第三方库（Swiper.js）
对于复杂需求，推荐使用成熟的轮播库：
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="image1.jpg"></div>
<div class="swiper-slide"><img src="image2.jpg"></div>
</div>
</div>import Swiper from 'swiper';
new Swiper('.swiper', {
loop: true,
autoplay: {
delay: 3000,
},
speed: 800
});注意事项
- 图片容器宽度应设置为所有图片总宽度，避免出现空白
- 移动端需添加touch事件支持
- 性能优化：对图片使用
will-change: transform提升渲染性能 - 无限循环建议克隆首尾图片，避免出现滚动间隙
