使用jQuery实现无缝滚动的区域

sky-coder

已于 2024-04-23 11:35:07 修改

阅读量490

点赞数 4

分类专栏：前端小知识文章标签： jquery 前端 javascript

于 2024-04-23 11:28:13 首次发布

如转载，请注明来源链接，否则追责！

本文链接：https://blog.csdn.net/l602108654/article/details/138118007

版权

前端小知识专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在网页设计中，经常需要展示一些内容，比如新闻、图片、通知等，而滚动展示是一个常见的展示方式。本文将介绍如何使用jQuery实现一个无缝滚动的区域，让内容能够持续滚动展示，并且在滚动到最后一个内容时能够无缝地回到起始位置，实现循环展示的效果。

1. 准备工作

在HTML文件中添加必要的结构和样式：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无缝滚动</title>
<style>
    #scroll-container {
        height: 200px;
        overflow: hidden;
        position: relative;
    }
    #scroll-content {
        position: absolute;
        top: 0;
    }
    .item {
        margin-bottom: 20px;
    }
</style>
</head>
<body>

<div id="scroll-container">
    <div id="scroll-content">
        <div class="item">内容1</div>
        <div class="item">内容2</div>
        <div class="item">内容3</div>
        <div class="item">内容4</div>
        <div class="item">内容5</div>
        <!-- 添加更多内容以滚动 -->
    </div>
</div>

<!-- 引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. 实现滚动效果

使用jQuery来实现滚动效果。我们首先定义滚动的速度，然后通过递归调用的方式，不断地将内容向上滚动。

<script>
$(document).ready(function(){
    // 滚动速度（毫秒）
    var scrollSpeed = 1000;

    // 开始滚动
    function startScroll() {
        var scrollContainer = $('#scroll-container');
        var scrollContent = $('#scroll-content');
        var firstItemHeight = scrollContent.children('.item').first().outerHeight(true); // 获取第一行内容的高度

        function scroll() {
            scrollContent.animate({top: '-=' + firstItemHeight + 'px'}, scrollSpeed, 'linear', function(){
                var firstItem = $(this).children('.item').first(); // 获取第一行内容
                $(this).append(firstItem); // 将第一行内容追加到最后
                $(this).css('top', 0); // 重置滚动内容的位置
                setTimeout(scroll, 0); // 递归调用滚动函数，实现无缝滚动
            });
        }

        scroll(); // 开始滚动
    }

    // 停止滚动
    function stopScroll() {
        $('#scroll-content').stop(); // 停止滚动动画
    }

    // 当鼠标悬停在区域时停止滚动，移开时继续滚动
    $('#scroll-container').hover(stopScroll, startScroll);

    // 初始化滚动
    startScroll();
});
</script>