当前位置：首页 > JavaScript

js实现图片滚动

2026-04-03 22:44:36JavaScript

实现图片滚动的JavaScript方法

使用JavaScript实现图片滚动可以通过多种方式完成，以下是几种常见的方法：

使用CSS动画结合JavaScript控制

通过CSS的animation属性实现滚动效果，JavaScript用于动态控制动画的启停或方向。

.scroll-container {
    display: flex;
    animation: scroll 10s linear infinite;
}
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

const container = document.querySelector('.scroll-container');
container.addEventListener('mouseenter', () => {
    container.style.animationPlayState = 'paused';
});
container.addEventListener('mouseleave', () => {
    container.style.animationPlayState = 'running';
});

使用JavaScript定时器实现滚动

通过setInterval动态修改元素的transform或scrollLeft属性实现滚动。

const container = document.getElementById('scroll-container');
let scrollPosition = 0;
const scrollSpeed = 2;

function autoScroll() {
    scrollPosition += scrollSpeed;
    if (scrollPosition >= container.scrollWidth / 2) {
        scrollPosition = 0;
    }
    container.style.transform = `translateX(-${scrollPosition}px)`;
    requestAnimationFrame(autoScroll);
}
autoScroll();

使用第三方库（如Swiper.js）

对于更复杂的滚动需求（如分页、触摸支持），可以使用成熟的轮播库。

js实现图片滚动

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<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>

<script>
    new Swiper('.swiper', {
        loop: true,
        autoplay: {
            delay: 3000,
        },
    });
</script>