php实现图片的翻滚,css实现图片滚动 - 我是希希呀的个人空间 - OSCHINA - 中文开源技术交流社区...

.box {

width: 440px;

white-space: nowrap;

overflow: auto;

scroll-snap-type: x mandatory;

}

.box img {

scroll-snap-align: start;

}

从以上代码，已经可以：当滑动滚动条时，滑到下一张图片的一丢丢，就会平滑定位到下一张图片了

scroll-snap-type

作用就是确定是水平滚动定位，还是垂直滚动定位。

none 默认值。表示滚动时候忽略捕捉点，也就是我们平时使用的滚动。

x 捕捉水平定位点。

y 捕捉垂直平定位点。

block 捕捉和块状元素排列一个滚动方向的定位点。默认文档流下指的就是垂直轴。

inline 捕捉和内联元素排列一个滚动方向的定位点。默认文档流下指的就是水平轴。

both 横轴纵轴都捕捉。

mandatory 表示“强制”，可选参数。强制定位，无论是添加删除元素，或者滚动窗口较小，不足以放下子元素。

proximity proximity表示“大约”，可选参数。可能会定位。这个值的作用表现比较玄乎，时间有限，我也没有弄透。大家可以对比下面这个demo，感受和mandatory属性值的不同。

scroll-snap-align

作用在滚动容器子元素上的，表示捕获点是上边缘，下边缘，还是中间位置。

none 默认值。不定义位置。

start 起始位置对齐，例如，垂直滚动，子元素和容器同上边缘对齐。

end 结束位置对齐，例如，垂直滚动，子元素和容器同下边缘对齐。

center 居中对齐。子元素中心和滚动容器中心一致。

想要个轮播图怎么办？？？想要有小圆点 不想要滚动条

scroll-behavior 平滑定位到指定元素的指定位置，跳转不会太生硬

不结合js，能想到的就是锚点跳转

.box_wrap {

position: relative;

width: 440px;

}

.box {

width: 440px;

white-space: nowrap;

overflow: scroll;

scroll-snap-type: x mandatory;

scroll-behavior: smooth;

}

.box img {

scroll-snap-align: start;

}

.circle {

position: absolute;

left: 0;

right: 0;

bottom: 20px;

text-align: center;

}

.circle a { /* 小圆点 */

display: inline-block;

width: 14px;

height: 14px;

background-color: red;

border-radius: 50%;

margin: 10px;

}

::-webkit-scrollbar {

display: none; /* 隐藏滚动条 */

}

已经可以切换和滚动了

剩下的按钮颜色需要配合js，今天的快乐就止于此吧