我的ul li想做一个左右滑动,应该怎么做
时间: 2023-11-08 18:38:51 浏览: 34
您可以使用CSS和JavaScript来实现一个左右滑动的ul li列表。以下是一种实现方式:
HTML结构:
```html
<div class="slider-container">
<ul class="slider-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
```
CSS样式:
```css
.slider-container {
overflow-x: scroll;
white-space: nowrap;
}
.slider-list {
display: inline-block;
list-style-type: none;
padding: 0;
margin: 0;
}
.slider-list li {
display: inline-block;
width: 200px; /* 设置每个列表项的宽度 */
height: 200px; /* 设置每个列表项的高度 */
}
```
JavaScript代码:
```javascript
const sliderContainer = document.querySelector('.slider-container');
const sliderList = document.querySelector('.slider-list');
let isDown = false;
let startX;
let scrollLeft;
sliderContainer.addEventListener('mousedown', (e) => {
isDown = true;
sliderContainer.classList.add('active');
startX = e.pageX - sliderContainer.offsetLeft;
scrollLeft = sliderContainer.scrollLeft;
});
sliderContainer.addEventListener('mouseleave', () => {
isDown = false;
sliderContainer.classList.remove('active');
});
sliderContainer.addEventListener('mouseup', () => {
isDown = false;
sliderContainer.classList.remove('active');
});
sliderContainer.addEventListener('mousemove', (e) => {
if (!isDown) return;
e.preventDefault();
const x = e.pageX - sliderContainer.offsetLeft;
const walk = (x - startX) * 3; // 控制滑动速度
sliderContainer.scrollLeft = scrollLeft - walk;
});
```
上述代码通过给ul列表容器添加滚动样式来实现左右滑动效果。您可以根据需要调整列表项的宽度和高度。注意,此代码只提供了基本的滑动功能,您可以根据自己的需求进行进一步的定制和优化。