这些幻灯片可以循环播放吗?

Question

刚刚制作了一个带有箭头的简单的div滑块。代码工作得很好，除了当我向左或向右导航时，它停在最后一项。

现在，当用户单击指向最后一个div幻灯片的左箭头时，将停止。此外，当用户单击最后一个div幻灯片的右箭头时，将停止。

我想要实现的是当我向左或向右导航时，滑块应该继续循环。也就是说，不以最后一项结束。

例如当用户到达8后点击右箭头时，下一个数字应该是1，再点击2跟随，再点击3跟随，等等。同样，当用户到达1后点击左箭头，下一个数字应该是8，再点击7，再点击6，等等。

let buttonLeft = document.getElementById('slide_left')
let buttonRight = document.getElementById('slide_right')
let container = document.getElementById('slider')
buttonLeft.addEventListener('click', function() {
container.scrollLeft -= 90
})
buttonRight.addEventListener('click', function() {
container.scrollLeft += 90
})

body {
background-color: #555;
height: 100vh;
display: grid;
align-items: center;
justify-items: center;
font-family: 'Helvetica';
}
div#slide_wrapper {
width: 440px;
display: flex;
justify-content: space-between;
height: fit-content;
}
div#slider {
width: 350px;
display: flex;
height: fit-content;
flex-wrap: nowrap;
overflow: hidden;
}
div.thumbnail {
min-width: 80px;
min-height: 80px;
cursor: pointer;
display: grid;
place-items: center;
font-size: 30px;
}
div.thumbnail:not(:last-child) {
margin-right: 10px;
}
div.thumbnail:nth-child(1) {
background-color: darkturquoise;
}
div.thumbnail:nth-child(2) {
background-color: goldenrod;
}
div.thumbnail:nth-child(3) {
background-color: rebeccapurple;
}
div.thumbnail:nth-child(4) {
background-color: salmon;
}
div.thumbnail:nth-child(5) {
background-color: lawngreen;
}
div.thumbnail:nth-child(6) {
background-color: sienna;
}
div.thumbnail:nth-child(7) {
background-color: bisque;
}
div.thumbnail:nth-child(8) {
background-color: navy;
}
div#slide_wrapper>button {
height: fit-content;
align-self: center;
font-size: 24px;
font-weight: 800;
border: none;
outline: none;
}
div#slide_wrapper>button:hover {
cursor: pointer;
}

<div id="slide_wrapper">
<button id="slide_left" class="slide_arrow">&#10094;</button>
<div id="slider">
<div class="thumbnail active">1</div>
<div class="thumbnail">2</div>
<div class="thumbnail">3</div>
<div class="thumbnail">4</div>
<div class="thumbnail">5</div>
<div class="thumbnail">6</div>
<div class="thumbnail">7</div>
<div class="thumbnail">8</div>
</div>
<button id="slide_right" class="slide_arrow">&#10095;</button>
</div>

Answer 1

这完全取决于您想要的效果，但对于所示的简单情况，您可以删除第一个(或最后一个，取决于您的方向)元素并将其放在缩略图集的末尾(或开始)。

这也让事情变得更有响应性，因为如果你不想，你不必在px项中固定宽度，因为为了移动元素，它们不必被记住。

const buttonLeft = document.getElementById('slide_left')
const buttonRight = document.getElementById('slide_right')
const container = document.getElementById('slider');
buttonLeft.addEventListener('click', function() {
const last = document.querySelector('#slider > :last-child');
last.remove();
container.prepend(last);
})
buttonRight.addEventListener('click', function() {
const first = document.querySelector('#slider > :first-child');
first.remove();
container.append(first);
})

body {
background-color: #555;
height: 100vh;
display: grid;
align-items: center;
justify-items: center;
font-family: 'Helvetica';
}
div#slide_wrapper {
width: 440px;
display: flex;
justify-content: space-between;
height: fit-content;
}
div#slider {
width: 350px;
display: flex;
height: fit-content;
flex-wrap: nowrap;
overflow: hidden;
}
div.thumbnail {
min-width: 80px;
min-height: 80px;
cursor: pointer;
display: grid;
place-items: center;
font-size: 30px;
}
div.thumbnail:not(:last-child) {
margin-right: 10px;
}
div.thumbnail.c1 {
background-color: darkturquoise;
}
div.thumbnail.c2 {
background-color: goldenrod;
}
div.thumbnail.c3 {
background-color: rebeccapurple;
}
div.thumbnail.c4 {
background-color: salmon;
}
div.thumbnail.c5 {
background-color: lawngreen;
}
div.thumbnail.c6 {
background-color: sienna;
}
div.thumbnail.c7 {
background-color: bisque;
}
div.thumbnail.c8 {
background-color: navy;
}
div#slide_wrapper>button {
height: fit-content;
align-self: center;
font-size: 24px;
font-weight: 800;
border: none;
outline: none;
}
div#slide_wrapper>button:hover {
cursor: pointer;
}

<div id="slide_wrapper">
<button id="slide_left" class="slide_arrow">&#10094;</button>
<div id="slider">
<div class="thumbnail c1 active">1</div>
<div class="thumbnail c2">2</div>
<div class="thumbnail c3">3</div>
<div class="thumbnail c4">4</div>
<div class="thumbnail c5">5</div>
<div class="thumbnail c6">6</div>
<div class="thumbnail c7">7</div>
<div class="thumbnail c8">8</div>
</div>
<button id="slide_right" class="slide_arrow">&#10095;</button>
</div>

Answer 2

我认为这总体上是一个更好的方式来动态呈现数据，只有4个容器的值改变，因为你点击左边和右边的箭头，而不是有一个长可滚动的div。这变得更加难以维护，特别是如果你试图实现环绕功能。

所以我改变了如何将数据呈现到屏幕上的逻辑。而不是有尽可能多的div在容器中，因为有数据，隐藏它们，并滚动通过div按钮被点击，我做了这样做，总是有4个(或尽可能多的你想要的)容器和它们的值被改变，因为你从一个变量按下按钮(和容器保持在相同的位置，从不移动)。

一个很好的学习经验是改变数据的形状，像这样:

const data = [
{
value: 1,
color: goldenrod
}, {
value: 2,
color: rebeccapurple
}...
]

，并通过设置HTML元素的样式，当您按下render函数内的按钮时，获得应用于div的颜色。

希望对你有帮助。

const data = [1, 2, 3, 4, 5, 6, 7, 8]
let curPos = 0;
let buttonLeft = document.getElementById('slide_left')
let buttonRight = document.getElementById('slide_right')
let container = document.getElementById('slider')
const render = (curPos) => {
for (let i = 0; i < container.children.length; i++) {
container.children[i].innerText = data[wrapPos(curPos + i)];
}
}
const calculatePos = (newPos) => {
if (newPos >= data.length) {
curPos = 0;
return curPos;
}
if (newPos < 0) {
curPos = data.length - 1;
return curPos;
}
curPos = newPos;
return curPos;
}
const wrapPos = (pos) => {
if(pos >= data.length) return pos - data.length;
return pos;
}
buttonLeft.addEventListener('click', function() {
render(calculatePos(curPos - 1))
})
buttonRight.addEventListener('click', function() {
render(calculatePos(curPos + 1))
})
render(curPos);

body {
background-color: #555;
height: 100vh;
display: grid;
align-items: center;
justify-items: center;
font-family: 'Helvetica';
}
div#slide_wrapper {
width: 440px;
display: flex;
justify-content: space-between;
height: fit-content;
}
div#slider {
width: 350px;
display: flex;
height: fit-content;
flex-wrap: nowrap;
overflow: hidden;
}
div.thumbnail {
min-width: 80px;
min-height: 80px;
cursor: pointer;
display: grid;
place-items: center;
font-size: 30px;
}
div.thumbnail:not(:last-child) {
margin-right: 10px;
}
div.thumbnail:nth-child(1) {
background-color: darkturquoise;
}
div.thumbnail:nth-child(2) {
background-color: goldenrod;
}
div.thumbnail:nth-child(3) {
background-color: rebeccapurple;
}
div.thumbnail:nth-child(4) {
background-color: salmon;
}
div.thumbnail:nth-child(5) {
background-color: lawngreen;
}
div.thumbnail:nth-child(6) {
background-color: sienna;
}
div.thumbnail:nth-child(7) {
background-color: bisque;
}
div.thumbnail:nth-child(8) {
background-color: navy;
}
div#slide_wrapper>button {
height: fit-content;
align-self: center;
font-size: 24px;
font-weight: 800;
border: none;
outline: none;
}
div#slide_wrapper>button:hover {
cursor: pointer;
}
.active {
color: red;
}

<div id="slide_wrapper">
<button id="slide_left" class="slide_arrow">&#10094;</button>
<div id="slider">
<div class="thumbnail active"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
</div>
<button id="slide_right" class="slide_arrow">&#10095;</button>
</div>

Answer 3

您可以在removeChild(删除第一个/最后一个元素)和insertAdjacentHTML(插入最后一个/第一个元素)中尝试这种方法。

let buttonLeft = document.getElementById('slide_left');
let buttonRight = document.getElementById('slide_right');
let container = document.getElementById('slider');
let containerMaxLeft = container.scrollWidth - container.clientWidth;
buttonLeft.addEventListener('click', function() {
let nextPos = container.scrollLeft - 90;
if (nextPos < 0) {
const lastChild = container.lastElementChild
container.removeChild(lastChild)
container.insertAdjacentHTML(
"afterbegin",
lastChild.outerHTML
);
} else {
container.scrollLeft = nextPos;
}
});
buttonRight.addEventListener('click', function() {
let nextPos = container.scrollLeft + 90;
if (nextPos > containerMaxLeft) {
const firstChild = container.firstElementChild
container.removeChild(firstChild)
container.insertAdjacentHTML(
"beforeend",
firstChild.outerHTML
);
} else {
container.scrollLeft = nextPos;
}
});

body {
background-color: #555;
height: 100vh;
display: grid;
align-items: center;
justify-items: center;
font-family: 'Helvetica';
}
div#slide_wrapper {
width: 440px;
display: flex;
justify-content: space-between;
height: fit-content;
}
div#slider {
width: 350px;
display: flex;
height: fit-content;
flex-wrap: nowrap;
overflow: hidden;
}
div.thumbnail {
min-width: 80px;
min-height: 80px;
cursor: pointer;
display: grid;
place-items: center;
font-size: 30px;
}
div.thumbnail:not(:last-child) {
margin-right: 10px;
}
div.thumbnail {
background-color: darkturquoise;
}
div#slide_wrapper>button {
height: fit-content;
align-self: center;
font-size: 24px;
font-weight: 800;
border: none;
outline: none;
}
div#slide_wrapper>button:hover {
cursor: pointer;
}

<div id="slide_wrapper">
<button id="slide_left" class="slide_arrow">&#10094;</button>
<div id="slider">
<div class="thumbnail active">1</div>
<div class="thumbnail">2</div>
<div class="thumbnail">3</div>
<div class="thumbnail">4</div>
<div class="thumbnail">5</div>
<div class="thumbnail">6</div>
<div class="thumbnail">7</div>
<div class="thumbnail">8</div>
</div>
<button id="slide_right" class="slide_arrow">&#10095;</button>
</div>

注意:颜色不能正确应用，因为第一个元素将成为最后一个元素，所以颜色将与更改的元素顺序混淆。