在响应式设计中，自适应的图片滚动是一个非常常见的需求。它可以让页面更加生动、有趣，同时也可以提升用户体验。本文将介绍如何利用 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 和其子元素设置样式。具体样式如下：
-- -------------------- ---- ------- ----------------- - --------- --------- ------ ----- ------- ------ --------- ------- - --------------- - --------- --------- ---- -- ----- -- ------------ ------- - --------------- --- - -------- ------------- ------- ----- ------------- ----- - ----------------- - --------- --------- ------- -- ----- -- ------ ----- ------- ----- ----------------- ----- -展开代码
其中，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 实现图片滚动的功能。具体代码如下：
-- -------------------- ---- ------- --- ------------- - ------------------------------------------ --- --------------- - -------------------------------------------- --- -------------- - ------------------------- - -------------------------- --- -------------- - ------------------------- - -------------------------- --------------------------- - -------------- - --- - ---- ---------------------------------------- ---------- - --- ----------------- - ------------------------ - -------------------------- - --------------------------- -------------------------- - ----------------- - -------------------------- - --------------- - ----- ---展开代码
首先，我们使用 document.querySelector() 方法获取 slider-wrapper 和 slider-scrollbar 元素。
然后，我们通过计算 sliderWrapper.offsetWidth 和 sliderWrapper.clientWidth 的差值，得到滚动条的宽度 scrollbarWidth。同时，我们还计算了容器 div 的宽度与图片总宽度的比例 scrollbarRatio，用于确定滚动条的宽度。
接着，我们将滚动条的宽度设置为 scrollbarRatio * 100%，并将其位置设置为容器 div 的底部。
最后，我们监听 sliderWrapper 的 scroll 事件，根据当前滚动的位置计算滚动条的位置，并将其移动到正确的位置。
示例代码
完整的示例代码如下：
-- -------------------- ---- ------- ---- ------------------------- ---- ----------------------- ---- ----------------- ---- ----------------- ---- ----------------- ------ ---- ------------------------------- ------ ------- ----------------- - --------- --------- ------ ----- ------- ------ --------- ------- - --------------- - --------- --------- ---- -- ----- -- ------------ ------- - --------------- --- - -------- ------------- ------- ----- ------------- ----- - ----------------- - --------- --------- ------- -- ----- -- ------ ----- ------- ----- ----------------- ----- - -------- -------- --- ------------- - ------------------------------------------ --- --------------- - -------------------------------------------- --- -------------- - ------------------------- - -------------------------- --- -------------- - ------------------------- - -------------------------- --------------------------- - -------------- - --- - ---- ---------------------------------------- ---------- - --- ----------------- - ------------------------ - -------------------------- - --------------------------- -------------------------- - ----------------- - -------------------------- - --------------- - ----- --- ---------展开代码
指导意义
通过上述代码，我们可以很容易地制作出一个自适应的图片滚动。但是，在实际开发过程中，我们还需要考虑一些细节问题，例如图片加载时的动画效果、图片大小不一时的适配问题等等。因此，我们需要根据实际需求进行相应的调整和优化。
另外，自适应的图片滚动不仅可以用于展示图片，还可以用于展示其他类型的内容，例如新闻、产品等等。因此，我们可以将其作为一个通用的组件，方便在不同的项目中使用。
总的来说，自适应的图片滚动是一个非常实用的功能，在响应式设计中应用广泛。掌握其制作方法，可以提升我们的前端开发技能，同时也能够提升用户体验，让页面更加生动、有趣。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d4eb2fa941bf7134928fb4
