手机css左右滑动
时间2023-07-29 05:27:05发布访客分类CSS浏览853
导读：在移动端开发中，有时候需要实现左右滑动的效果，在这种情况下，就可以使用CSS实现。/* HTML */第一页第二页第三页第四页/* CSS */.container {position: relative;overflow-x: hidde...
在移动端开发中，有时候需要实现左右滑动的效果，在这种情况下，就可以使用CSS实现。
/* HTML */
/* CSS */.container {
position: relative;
overflow-x: hidden;
width: 100%;
}
.slider {
position: absolute;
top: 0;
left: 0;
white-space: nowrap;
}
.slider ul {
display: inline-block;
white-space: normal;
font-size: 0;
}
.slider li {
display: inline-block;
box-sizing: border-box;
width: 100%;
padding: 20px;
font-size: 16px;
vertical-align: top;
}
.slider li:first-child {
margin-left: -100%;
}
.slider transition {
transition: transform .6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
/* JS */let currentIndex = 0;
let slider = document.querySelector('.slider');
function sliderNext() {
currentIndex++;
slider.style.transform = `translateX(-${
currentIndex * 100}
%)`;
}
function sliderPrev() {
currentIndex--;
slider.style.transform = `translateX(-${
currentIndex * 100}
%)`;
}
document.querySelector('.prev-button').addEventListener('click', sliderPrev);
document.querySelector('.next-button').addEventListener('click', sliderNext);
上述代码中，我们通过CSS实现了一种左右滑动的效果。通过控制slider的transform属性和JS上的一些代码，就能够实现了。需要注意的是，样式中的white-space属性可以使列表项横向排列，而transition属性可以让slider平滑滑动。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 手机css左右滑动
本文地址： https://pptw.com/jishu/341099.html
