响应式设计中如何制作自适应的图片滚动

在响应式设计中，自适应的图片滚动是一个非常常见的需求。它可以让页面更加生动、有趣，同时也可以提升用户体验。本文将介绍如何利用 HTML、CSS 和 JavaScript 制作自适应的图片滚动，并提供示例代码和指导意义。

HTML 结构

首先，我们需要在 HTML 中创建一个容器 div，用于包含图片和滚动条。容器 div 的结构如下：

<div class="slider-container">
  <div class="slider-wrapper">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
  </div>
  <div class="slider-scrollbar"></div>
</div>

容器 div 的 class 为 slider-container，内部包含两个子元素：slider-wrapper 和 slider-scrollbar。slider-wrapper 用于包含所有的图片，slider-scrollbar 用于显示滚动条。

CSS 样式

接下来，我们需要为容器 div 和其子元素设置样式。具体样式如下：

// www.javascriptcn.com code example
.slider-container {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.slider-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
}

.slider-wrapper img {
  display: inline-block;
  height: 100%;
  margin-right: 10px;
}

.slider-scrollbar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background-color: #ccc;
}

其中，slider-container 的 position 属性设置为 relative，是为了让其内部的子元素 slider-wrapper 和 slider-scrollbar 的 position 属性相对于 slider-container 生效。

slider-container 的 width 和 height 属性分别设置为 100% 和 300px，可以根据实际需求进行调整。

slider-wrapper 的 position 属性设置为 absolute，是为了让其内部的图片能够水平排列。white-space 属性设置为 nowrap，是为了防止图片换行。

slider-wrapper img 的 display 属性设置为 inline-block，是为了让图片能够水平排列。height 属性设置为 100%，是为了让图片高度与容器 div 的高度相同。margin-right 属性设置为 10px，是为了让图片之间有一定的间距。

slider-scrollbar 的 position 属性设置为 absolute，是为了让其在容器 div 的底部固定位置。width 和 height 属性分别设置为 100% 和 10px，可以根据实际需求进行调整。background-color 属性设置为 #ccc，是为了给滚动条添加背景颜色。

JavaScript 功能

最后，我们需要使用 JavaScript 实现图片滚动的功能。具体代码如下：

// www.javascriptcn.com code example
var sliderWrapper = document.querySelector('.slider-wrapper');
var sliderScrollbar = document.querySelector('.slider-scrollbar');

var scrollbarWidth = sliderWrapper.offsetWidth - sliderWrapper.clientWidth;
var scrollbarRatio = sliderWrapper.clientWidth / sliderWrapper.scrollWidth;

sliderScrollbar.style.width = scrollbarRatio * 100 + '%';

sliderWrapper.addEventListener('scroll', function() {
  var scrollbarPosition = sliderWrapper.scrollLeft / (sliderWrapper.scrollWidth - sliderWrapper.clientWidth);
  sliderScrollbar.style.left = scrollbarPosition * (sliderWrapper.clientWidth - scrollbarWidth) + 'px';
});

首先，我们使用 document.querySelector() 方法获取 slider-wrapper 和 slider-scrollbar 元素。

然后，我们通过计算 sliderWrapper.offsetWidth 和 sliderWrapper.clientWidth 的差值，得到滚动条的宽度 scrollbarWidth。同时，我们还计算了容器 div 的宽度与图片总宽度的比例 scrollbarRatio，用于确定滚动条的宽度。

接着，我们将滚动条的宽度设置为 scrollbarRatio * 100%，并将其位置设置为容器 div 的底部。

最后，我们监听 sliderWrapper 的 scroll 事件，根据当前滚动的位置计算滚动条的位置，并将其移动到正确的位置。

示例代码

完整的示例代码如下：

// www.javascriptcn.com code example
<div class="slider-container">
  <div class="slider-wrapper">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
  </div>
  <div class="slider-scrollbar"></div>
</div>

<style>
.slider-container {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.slider-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
}

.slider-wrapper img {
  display: inline-block;
  height: 100%;
  margin-right: 10px;
}

.slider-scrollbar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background-color: #ccc;
}
</style>

<script>
var sliderWrapper = document.querySelector('.slider-wrapper');
var sliderScrollbar = document.querySelector('.slider-scrollbar');

var scrollbarWidth = sliderWrapper.offsetWidth - sliderWrapper.clientWidth;
var scrollbarRatio = sliderWrapper.clientWidth / sliderWrapper.scrollWidth;

sliderScrollbar.style.width = scrollbarRatio * 100 + '%';

sliderWrapper.addEventListener('scroll', function() {
  var scrollbarPosition = sliderWrapper.scrollLeft / (sliderWrapper.scrollWidth - sliderWrapper.clientWidth);
  sliderScrollbar.style.left = scrollbarPosition * (sliderWrapper.clientWidth - scrollbarWidth) + 'px';
});
</script>

指导意义

通过上述代码，我们可以很容易地制作出一个自适应的图片滚动。但是，在实际开发过程中，我们还需要考虑一些细节问题，例如图片加载时的动画效果、图片大小不一时的适配问题等等。因此，我们需要根据实际需求进行相应的调整和优化。

另外，自适应的图片滚动不仅可以用于展示图片，还可以用于展示其他类型的内容，例如新闻、产品等等。因此，我们可以将其作为一个通用的组件，方便在不同的项目中使用。

总的来说，自适应的图片滚动是一个非常实用的功能，在响应式设计中应用广泛。掌握其制作方法，可以提升我们的前端开发技能，同时也能够提升用户体验，让页面更加生动、有趣。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d4eb2fa941bf7134928fb4