Jquery 图片列表 随着下拉显示当前图片及上下图

片

可以使用jQuery的scroll事件和offset()方法来实现。

HTML结构：

<div id="image-list">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
  ...
</div>

CSS样式：

#image-list {
  height: 500px;
  overflow-y: scroll;
}

jQuery代码：

$(document).ready(function() {
  var $window = $(window);
  var $imageList = $('#image-list');
  var $images = $imageList.find('img');
  var windowHeight = $window.height();
  var imageHeight = $images.first().height();
  var scrollTop = $window.scrollTop();
  var currentIndex = Math.floor(scrollTop / imageHeight);
  
  $window.scroll(function() {
    scrollTop = $window.scrollTop();
    currentIndex = Math.floor(scrollTop / imageHeight);
    var startIndex = Math.max(currentIndex - 1, 0);
    var endIndex = Math.min(currentIndex + 1, $images.length - 1);
    $images.hide();
    $images.slice(startIndex, endIndex + 1).show();
  });
  
  $window.trigger('scroll');
});

解释：

首先获取窗口和图片列表的jQuery对象，以及窗口高度、图片高度、滚动距离和当前显示的图片索引。然后绑定scroll事件，在滚动时根据滚动距离计算当前显示的图片索引，再计算前后两张图片的索引范围，最后使用slice()方法来显示这些图片。最后触发一次scroll事件来初始化显示。