在我滾動到最后一張幻燈片后，試圖進一步滾動，希望它能讓我回到第一張幻燈片，但它進一步滾動，那里什么都沒有。我在滑塊里有2個區塊，每個區塊有3張卡片。如何使滑塊在幻燈片結束后回傳到1個幻燈片，而且還是反方向的，不是瞎子就是傻子，但我什么都看不到，請幫忙，我將感激不盡
。<div class="slider">
<button class="slider-prev"/span>> <img src="icons/halls/prev. svg" alt="prev"></button>
<div class="slider-wrapper">/span>
<div class="slider-item"/span>>
<div class="slider-item__wrapper">/span>
<img src="img/halls/russian. png" alt="" class="slider-item__img"> class=
<div class="slider-item__value"/span>>
<p class="slider-item__human"/span>> 3 Человека</p> 3 Человека</p>
<p class="slider-item__price">/span>от 600 руб. </p>
</div>/span>
</div>/span>
<div class="slider-item__descr"/span>>
<div class="slider-item__title"/span>> Русскаябаня</div>。
<div class="slider-item__subtitle"/span>> Русская</div>。
</div>/span>
< a href="#" class="slider-item__button" /span>> Подробнее</a>。
</div>/span>
<div class="slider-item">
<div class="slider-item__wrapper">/span>
<img src="img/halls/turk. png" alt="" class="slider-item__img"> class="slider-item__img">
<div class="slider-item__value"/span>>
<p class="slider-item__human"/span>> 2 Человека</p> 2 Человека</p>
<p class="slider-item__price">/span>от 800 руб. </p>
</div>/span>
</div>/span>
<div class="slider-item__descr"/span>>
<div class="slider-item__title"> Турецкий хаммам</div>
<div class="slider-item__subtitle"/span>> Хамам</div>。
</div>/span>
< a href="#" class="slider-item__button" /span>> Подробнее</a>。
</div>/span>
<div class="slider-item">
<div class="slider-item__wrapper">/span>
<img src="img/halls/fin. png" alt="" class="slider-item__img"> class="slider-item__img"
<div class="slider-item__value"/span>>
<div class="slider-item__value"/span>>
<p class="slider-item__human"/span>> 3 Человека</p> 3 Человека</p>
<p class="slider-item__price"/span>> от 700 руб</p>。
</div>/span>
</div>/span>
</div>/span>
<div class="slider-item__descr"/span>>
<div class="slider-item__title"> Финская сауна</div>。
<div class="slider-item__subtitle"/span>> Финская</div>。
</div>/span>
< a href="#" class="slider-item__button" /span>> Подробнее</a>。
</div>/span>
</div>/span>
<div class="slider-wrapper">
<div class="slider-item"/span>>
<div class="slider-item__wrapper">/span>
<img src="img/halls/fin. png" alt="" class="slider-item__img"> class="slider-item__img"
<div class="slider-item__value"/span>>
<div class="slider-item__value"/span>>
<p class="slider-item__human"/span>> 3 Человека</p> 3 Человека</p>
<p class="slider-item__price"/span>> от 700 руб</p>。
</div>/span>
</div>/span>
</div>/span>
<div class="slider-item__descr"/span>>
<div class="slider-item__title"> Финская сауна</div>。
<div class="slider-item__subtitle"/span>> Финская</div>。
</div>/span>
< a href="#" class="slider-item__button" /span>> Подробнее</a>。
</div>/span>
<div class="slider-item">
<div class="slider-item__wrapper">/span>
<img src="img/halls/turk. png" alt="" class="slider-item__img"> class="slider-item__img">
<div class="slider-item__value"/span>>
<p class="slider-item__human"/span>> 2 Человека</p> 2 Человека</p>
<p class="slider-item__price">/span>от 800 руб. </p>
</div>/span>
</div>/span>
<div class="slider-item__descr"/span>>
<div class="slider-item__title"> Турецкий хаммам</div>
<div class="slider-item__subtitle"/span>> Хамам</div>。
</div>/span>
< a href="#" class="slider-item__button" /span>> Подробнее</a>。
</div>/span>
<div class="slider-item">
<div class="slider-item__wrapper">/span>
<img src="img/halls/russian. png" alt="" class="slider-item__img"> class="slider-item__img">
<div class="slider-item__value"/span>>
<p class="slider-item__human"/span>> 3 Человека</p> 3 Человека</p>
<p class="slider-item__price">/span>от 600 руб. </p>
</div>/span>
</div>/span>
<div class="slider-item__descr"/span>>
<div class="slider-item__title"/span>> Русскаябаня</div>。
<div class="slider-item__subtitle"/span>> Русская</div>。
</div>/span>
< a href="#" class="slider-item__button" /span>> Подробнее</a>。
</div>/span>
</div>/span>
<button class="slider-next"/span>> <img src="icons/halls/next. svg" alt="next"></button>
</div>/span>
'use strict'。
window.addEventListener('DOMContentLoaded', () => {
// slider
const slides = document.querySelectorAll('.slider-wrapper') 。
const prev = document.querySelector（'.slider-prev'）。
const next = document.querySelector（'.slider-next'）。
let count = 0;
showSlides（0）。
function showSlides（n） {
if(n > slides.length){
count = 0;
}
if(n < 0) {
count = slides.length;
}
slides.forEach(item => {
item.classList.add（'hide'）。
});
slides[count].classList.remove（'hide'）。
}
function plusSlides（n） {
showSlides（count = n）。
}
prev.addEventListener('click', () => {
plusSlides（-1）。
});
next.addEventListener('click', ( ) => {
plusSlides（1）。
});
});在此輸入圖片描述
uj5u.com熱心網友回復：
似乎有錯誤。
if(n > slides.length){
count = 0;
}
if(n < 0) {
count = slides.length;
你的計數器從0開始，但.length回傳的值是從1開始的。嘗試從1開始計數，或將if條件改為slides.length - 1和count = slides.length - 1;/code>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/333298.html
標籤：