jquery 图片从左到右无缝滚动

原创

mob64ca12e732bb 2024-09-16 04:41:16 ©著作权

文章标签 jQuery HTML 无缝滚动 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12e732bb的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用 jQuery 实现图片从左到右无缝滚动

在这篇文章中，我们将教你如何使用 jQuery 创建一个图片无缝滚动的效果。这种效果常用于网站的轮播图或信息展示。我们将逐步讲解实现该功能的流程、所需代码及其解释。

实现流程

首先，我们将整个实现过程分为以下几个步骤：

| 步骤 | 描述                         |
|------|------------------------------|
| 1    | 创建基本的 HTML 结构        |
| 2    | 添加 CSS 样式来设置外观     |
| 3    | 引入 jQuery 库              |
| 4    | 编写 jQuery 代码来实现滚动  |
| 5    | 调试和优化代码              |

每一步的详细说明

1. 创建基本的 HTML 结构

我们将创建一个简单的 HTML 页面，其中包含一个可以滚动的图片列表。

<!DOCTYPE html>
<html lang="zh">
<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">
        <div class="scroll-images">
            <img src="image1.jpg" alt="Image 1">
            <img src="image2.jpg" alt="Image 2">
            <img src="image3.jpg" alt="Image 3">
        </div>
    </div>
    <script src="
    <script src="script.js"></script>
</body>
</html>

2. 添加 CSS 样式来设置外观

在 styles.css 文件中添加一些样式以美化我们的滚动效果。

body {
    margin: 0;
    overflow: hidden;
}

.scroll-container {
    width: 100%;
    overflow: hidden; /* 隐藏溢出的部分 */
    white-space: nowrap; /* 使图片横向排列 */
}

.scroll-images img {
    width: 200px; /* 设置每张图片的宽度 */
    height: auto;
}

3. 引入 jQuery 库

上面的 HTML HTML 文件中已经引入了 jQuery 库，接下来我们需要在 script.js 中编写滚动功能的代码。

4. 编写 jQuery 代码来实现滚动

在 script.js 中添加以下代码：

$(document).ready(function() {
    const $scrollImages = $('.scroll-images');
    const imageWidth = $('.scroll-images img').width(); // 获取图片的宽度
    let scrollSpeed = 1; // 设置滚动速度

    function scroll() {
        $scrollImages.animate({
            left: `-=${scrollSpeed}` // 每次向左移动 scrollSpeed 的宽度
        }, 50, function() {
            // 当动画完成时，如果图片已移动到左侧边缘则重置位置
            if (parseInt($scrollImages.css('left')) <= -imageWidth) {
                $scrollImages.css('left', '0'); // 重置为初始位置
            }
            scroll(); // 继续滚动
        });
    }

    // 初始化位置
    $scrollImages.css('left', '0');
    scroll(); // 启动滚动
});