jquery无缝滚动怎么写

jQuery无缝滚动是一种常见的网页特效，它可以使网页在向下或向上滚动时实现平滑过渡，给用户带来更好的视觉体验，在本教程中，我们将学习如何使用jQuery来实现无缝滚动效果。

准备工作

1、我们需要在HTML文件中引入jQuery库，可以通过以下方式引入：

<script src="https://code.jquery.com/jquery3.6.0.min.js"></script>

2、准备一个包含多个子元素的容器，

<div class="container">
  <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>

编写CSS样式

为了使容器在滚动时保持固定高度，我们需要设置容器的高度和溢出隐藏：

.container {
  height: 300px; /* 设置容器高度 */
  overflow: hidden; /* 溢出隐藏 */
}

编写JavaScript代码

接下来，我们需要编写JavaScript代码来实现无缝滚动效果，我们需要获取容器和子元素：

var container = $(".container"); // 获取容器
var items = container.find(".item"); // 获取子元素

我们需要计算每个子元素的高度，并将它们添加到一个数组中：

var itemHeights = []; // 存储子元素高度的数组
items.each(function() {
  itemHeights.push($(this).outerHeight()); // 获取子元素高度并添加到数组中
});

接下来，我们需要定义一个函数来更新当前显示的子元素：

function updateItems() {
  var currentIndex = 0; // 当前显示的子元素的索引
  var scrollTop = container.scrollTop(); // 容器的滚动距离
  var visibleItems = Math.ceil(container.innerHeight() / itemHeights[0]); // 可见的子元素数量
  // 如果滚动到最后一个子元素，将索引重置为0，实现无限循环滚动
  if (scrollTop + container.innerHeight() >= itemHeights[visibleItems 1]) {
    currentIndex = 0;
  } else {
    // 否则，根据滚动距离计算当前显示的子元素的索引
    currentIndex = Math.floor(scrollTop / itemHeights[0]);
  }
  // 根据当前显示的子元素的索引，设置容器的背景颜色（可选）
  container.css("backgroundcolor", "rgba(0, 0, 0, " + (currentIndex * 0.1) + ")");
}

我们需要在窗口大小改变时更新子元素的高度，并在滚动事件中调用updateItems函数：

$(window).resize(function() {
  itemHeights = []; // 清空子元素高度数组，重新计算高度
  items.each(function() {
    itemHeights.push($(this).outerHeight()); // 获取子元素高度并添加到数组中
  });
});
container.on("scroll", updateItems); // 监听滚动事件，调用updateItems函数更新显示的子元素

至此，我们已经完成了jQuery无缝滚动的实现，现在，当用户向下或向上滚动时，容器中的子元素将实现平滑过渡，给用户带来更好的视觉体验。