HTML CSS JS在完整页面中添加图像滑块

#slider-container {
  width: 500px;
  height: 300px;
  background-color: #f1f1f1;
}

$(document).ready(function() {
  // 获取容器元素
  var sliderContainer = $('#slider-container');

  // 创建图像滑块元素
  var slider = $('<img>').attr('src', 'slider.jpg').addClass('slider-image');

  // 将图像滑块添加到容器元素中
  sliderContainer.append(slider);

  // 添加滑动事件处理程序
  slider.on('mousedown', function(event) {
    // 记录鼠标按下时的初始位置
    var startX = event.pageX;

    // 添加鼠标移动事件处理程序
    $(document).on('mousemove', function(event) {
      // 计算鼠标移动的距离
      var distanceX = event.pageX - startX;

      // 更新图像滑块的位置
      slider.css('left', distanceX);
    });

    // 添加鼠标松开事件处理程序
    $(document).on('mouseup', function() {
      // 移除鼠标移动事件处理程序
      $(document).off('mousemove');

      // 移除鼠标松开事件处理程序
      $(document).off('mouseup');

      // 处理滑块松开后的逻辑
      // ...
    });
  });
});