超简单的图片左右切换滑动
时间: 2023-09-23 08:12:12 浏览: 42
要实现图片左右切换滑动,可以使用一些前端框架或者库来简化代码的编写。以下是一个简单的示例:
HTML代码:
```html
<div class="slider">
<div class="slides">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
</div>
```
CSS代码:
```css
.slider {
overflow: hidden;
}
.slides {
display: flex;
width: 100%;
}
.slides img {
flex: 1;
object-fit: cover;
}
```
JavaScript代码:
```javascript
const slider = document.querySelector('.slider');
const slides = slider.querySelector('.slides');
let isDragging = false;
let startPosition = 0;
let currentTranslate = 0;
let prevTranslate = 0;
let animationID = 0;
let currentIndex = 0;
slides.addEventListener('mousedown', dragStart);
slides.addEventListener('mouseup', dragEnd);
slides.addEventListener('mouseleave', dragEnd);
slides.addEventListener('mousemove', drag);
slides.addEventListener('touchstart', dragStart);
slides.addEventListener('touchend', dragEnd);
slides.addEventListener('touchmove', drag);
function dragStart(event) {
isDragging = true;
startPosition = getPositionX(event);
animationID = requestAnimationFrame(animation);
slider.classList.add('grabbing');
}
function dragEnd(event) {
isDragging = false;
cancelAnimationFrame(animationID);
const diff = currentTranslate - prevTranslate;
if (diff < -100 && currentIndex < slides.children.length - 1) {
currentIndex++;
}
if (diff > 100 && currentIndex > 0) {
currentIndex--;
}
setPositionByIndex();
slider.classList.remove('grabbing');
}
function drag(event) {
if (isDragging) {
const currentPosition = getPositionX(event);
currentTranslate = prevTranslate + currentPosition - startPosition;
}
}
function animation() {
setSliderPosition();
if (isDragging) {
requestAnimationFrame(animation);
}
}
function getPositionX(event) {
return event.type.includes('mouse') ? event.pageX : event.touches[0].clientX;
}
function setPositionByIndex() {
currentTranslate = currentIndex * -slides.offsetWidth;
prevTranslate = currentTranslate;
setSliderPosition();
}
function setSliderPosition() {
slides.style.transform = `translateX(${currentTranslate}px)`;
}
```
这里使用了CSS的Flexbox布局和translateX属性来实现图片的滑动效果。JavaScript代码中,通过监听鼠标或触摸事件来获取当前滑动的位置和方向,并通过requestAnimationFrame函数实现动画效果。最后,根据滑动的方向和距离,计算出当前应该显示的图片索引,并通过设置translateX属性来实现滑动效果。