正文

掌握JS实现图片跑马灯，轻松打造炫酷动态效果

/0 浏览量
0627

图片跑马灯是一种常见的网页动态效果，它可以让一系列图片连续地从一个方向移动到另一个方向，给用户带来视觉上的连续感和动感。使用JavaScript来实现图片跑马灯效果，不仅可以增强网页的交互性，还能让你的网页看起来更加炫酷。下面，我们就来详细讲解如何使用JavaScript实现图片跑马灯效果。

一、准备工作

在开始编写代码之前，我们需要做好以下准备工作：

  1. 准备一系列图片，确保它们的尺寸一致。
  2. 创建一个HTML文件，并在其中添加一个用于显示图片的容器。

HTML结构示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>图片跑马灯效果</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="marquee-container">
        <div class="marquee">
            <img src="image1.jpg" alt="图片1">
            <img src="image2.jpg" alt="图片2">
            <img src="image3.jpg" alt="图片3">
            <!-- 更多图片 -->
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS样式示例：

.marquee-container {
    width: 100%;
    overflow: hidden;
}

.marquee {
    display: flex;
    animation: marquee 10s linear infinite;
}

@keyframes marquee {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

二、JavaScript实现跑马灯效果

在HTML文件中，我们已经创建了一个基本的图片跑马灯结构。接下来，我们将使用JavaScript来实现图片的动态滚动效果。

JavaScript代码示例：

function startMarquee() {
    const marquee = document.querySelector('.marquee');
    const images = marquee.querySelectorAll('img');
    const imageWidth = images[0].width;
    let currentX = 0;

    function move() {
        currentX -= 1;
        marquee.style.transform = `translateX(${currentX}px)`;
        if (currentX <= -imageWidth) {
            currentX = images.length * imageWidth;
        }
    }

    const intervalId = setInterval(move, 20);

    marquee.addEventListener('mouseenter', () => {
        clearInterval(intervalId);
    });

    marquee.addEventListener('mouseleave', () => {
        intervalId = setInterval(move, 20);
    });
}

startMarquee();

在上面的代码中，我们首先获取了跑马灯容器和所有图片的宽度。然后，定义了一个move函数，该函数用于移动图片。当图片移动到容器的左侧时，它将重新开始移动。我们使用setInterval函数来定时调用move函数，实现图片的连续滚动。

同时，我们还为跑马灯容器添加了鼠标移入和移出事件监听器，当鼠标移入时停止滚动，当鼠标移出时继续滚动。

三、总结

通过以上步骤，我们已经成功使用JavaScript实现了图片跑马灯效果。你可以根据自己的需求，调整图片的尺寸、速度和样式，打造出独一无二的炫酷动态效果。希望这篇文章能帮助你更好地理解和掌握图片跑马灯的实现方法。

-- 展开阅读全文 --