要实现在纯JavaScript环境下模拟
Swiper的无限循环滚动
效果，我们可以通过监听滑动结束事件并在适当的
时候将元素向相反方向移动来实现。
首先，我们需要创建一个包含若干个元素的容器，比如图片、卡片等，然后编写相关的HTML结构：
```html
<div class="
swiper-container">
<div class="
swiper-wrapper">
<!-- 添加多个项目 -->
<div class="
swiper-slide">项目1</div>
<div class="
swiper-slide">项目2</div>
<div class="
swiper-slide">项目
3</div>
<!-- 更多项目... -->
</div>
</div>
```
接下来，利用
CSS样式来设置宽度和布局，使其看起来像是无限滚动：
```
css
.
swiper-container {
overflow: hidden;
}
.
swiper-slide {
width: 100%;
}
```
然后，添加JavaScript代码来处理滚动逻辑：
```javascript
document.addEventListener(&#
39;DOMContentLoaded&#
39;, function() {
const
swiperContainer = document.querySelector(&#
39;.
swiper-container&#
39;);
let scrollDirection = &#
39;right&#
39;; // 初始滚动方向为右
// 获取所有滑块元素并存储在数组中
const slides = Array.from(
swiperContainer.querySelectorAll(&#
39;.
swiper-slide&#
39;));
// 滑动到下一个滑块函数
const nextSlide = () => {
if (scrollDirection === &#
39;right&#
39;) {
slideToLeft();
} else {
slideToRight();
}
};
// 向左滚动函数
const slideToLeft = () => {
if (slides) { // 如果还有未
显示的滑块
const currentSlideIndex = slides.indexOf(slides);
const nextIndex = (currentSlideIndex + 1) % slides.length;
slides[nextIndex].classList.remove(&#
39;hidden&#
39;);
slides[currentSlideIndex].classList.add(&#
39;hidden&#
39;);
setTimeout(() => {
slides[currentSlideIndex].style.right = `-calc(100% - ${window.innerWidth}px)`;
slides[nextIndex].style.right = `calc(${window.innerWidth}px / ${slides.length} * ${nextIndex})`;
scrollDirection = &#
39;left&#
39;;
}, 1); // 移除隐藏类的延迟是为了平滑切换
动画效果
}
};
// 向右滚动函数
const slideToRight = () => {
if (slides[slides.length - 1]) { // 如果还有未
显示的滑块
const currentSlideIndex = slides.lastIndexOf(slides[slides.length - 1]);
const previousIndex = (currentSlideIndex - 1 + slides.length) % slides.length;
slides[previousIndex].classList.remove(&#
39;hidden&#
39;);
slides[currentSlideIndex].classList.add(&#
39;hidden&#
39;);
setTimeout(() => {
slides[currentSlideIndex].style.left = `${window.innerWidth}px`;
slides[previousIndex].style.left = `calc(-${window.innerWidth}px * ${previousIndex})`;
scrollDirection = &#
39;right&#
39;;
}, 1);
}
};
// 监听滑动结束事件
swiperContainer.addEventListener(&#
39;touchend&#
39;, event => {
event.preventDefault(); // 阻止默认的触摸操作
// 检查滑动方向
const touchEndX = event.changedTouches.screenX;
const lastTouchX =
swiperContainer.lastChild.dataset.touchStartX;
if ((touchEndX > lastTouchX && scrollDirection === &#
39;left&#
39;) || (touchEndX < lastTouchX && scrollDirection === &#
39;right&#
39;)) {
return; // 当前滑动方向与滚动方向一致，无需触发滚动
}
scrollDirection = touchEndX > lastTouchX ? &#
39;right&#
39; : &#
39;left&#
39;;
if (!scrollDirection) {
scrollDirection = &#
39;right&#
39;; // 默认设定为向右滚动以防其他条件
没有满足
}
if (scrollDirection !== &#
39;left&#
39; && !slides) { // 已经滚动到了最后一页
nextSlide();
} else if (scrollDirection !== &#
39;right&#
39; && !slides[slides.length - 1]) { // 已经滚动到了第一页
nextSlide();
}
});
});
```
这个代码示例包含了基本的无限滚动逻辑，并通过监听触控结束事件来判断滑动方向，进而调用相应的滚动函数。当滑动到最后一页或第一页
时会自动触发下一次滚动动作。
-
扫一扫
1160
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
