javascript - 为轮播创建循环的问题 - 返回第一个元素
问题描述
我在轮播中创建循环时遇到问题,因此它会在点击事件到达最后一张卡片后返回第一张卡片 - rightButton。到目前为止,当到达最后一张卡片时,轮播会停止。
const carousel = document.querySelector("[data-target='carousel']");
const card = carousel.querySelector("[data-target='card']");
const leftButton = document.querySelector("[data-action='slideLeft']");
const rightButton = document.querySelector("[data-action='slideRight']");
const carouselWidth = carousel.offsetWidth;
const cardStyle = card.currentStyle || window.getComputedStyle(card)
const cardMarginRight = Number(cardStyle.marginRight.match(/\d+/g)[0]);
const cardCount = carousel.querySelectorAll("[data-target='card']").length;
let offset = 0;
const maxX = -((cardCount / 3) * carouselWidth +
(cardMarginRight * (cardCount / 3)) -
carouselWidth - cardMarginRight);
leftButton.addEventListener("click", function() {
if (offset !== 0) {
offset += carouselWidth + cardMarginRight;
carousel.style.transform = `translateX(${offset}px)`;
}
})
rightButton.addEventListener("click", function() {
if (offset !== maxX) {
offset -= carouselWidth + cardMarginRight;
carousel.style.transform = `translateX(${offset}px)`;
}
})
.wrapper {
height: 100px;
width: 432px;
position: relative;
overflow: hidden;
margin: 0 auto;
}
.button-wrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
}
.carousel {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
display: flex;
position: absolute;
left: 0;
transition: all 1s ease;
}
.card {
background: black;
min-width: 100px;
height: 100px;
margin-right: 1rem;
display: inline-block;
}
span {
color:#ffffff;
}
<div class="wrapper">
<ul class="carousel" data-target="carousel">
<li class="card" data-target="card"><span>1</span></li>
<li class="card" data-target="card"><span>2</span></li>
<li class="card" data-target="card"><span>3</span></li>
<li class="card" data-target="card"><span>4</span></li>
<li class="card" data-target="card"><span>5</span></li>
<li class="card" data-target="card"><span>6</span></li>
<li class="card" data-target="card"><span>7</span></li>
<li class="card" data-target="card"><span>8</span></li>
<li class="card" data-target="card"><span>9</span></li>
</ul>
<div class="button-wrapper">
<button data-action="slideLeft">L</button>
<button data-action="slideRight">R</button>
</div>
</div>
jsfiddle 上可用的代码: https ://jsfiddle.net/2qv6mpb1/
是否有人可以为我指明如何实现这一目标的正确方向?我
解决方案
当您的偏移量等于 maxX 时,您需要进行处理,并将偏移量重置为零。
rightButton.addEventListener("click", function() {
if (offset !== maxX) {
offset -= carouselWidth + cardMarginRight;
carousel.style.transform = `translateX(${offset}px)`;
} else {
offset = 0;
carousel.style.transform = `translateX(${offset}px)`;
}
})
推荐阅读
- go - getElementsByName 如何在 Go/WebAssembly 中工作?
- python - 熊猫数据框中每月的计数和累计和
- dax - DAX - 基于日期过滤运行总计,由于同一天的多个输出,相同的每日总计在多行上
- excel - 如何比较excel下拉列表中的值
- angular - Angular v12 组件样式文件不编译tailwindcss @apply
- shell - 循环运行脚本
- vba - PowerPoint 如何计算轴最大值?
- python - 为什么 str(repr(p)) 和 print(repr(p)) 不一样?
- python - 我正在研究人工神经网络。隐藏层在哪里?
- excel - VBA如何按值将对象添加到数组中