Javascript滑块不能自动工作？

Question

我创建了一个简单的 javascript 滑块，其中两个控件都可以完美运行，底点也可以高效运行，但自动滑动功能不起作用。我尝试了for循环，设置超时方法，设置间隔方法，但无法解决这个问题。

这是我的代码：

const track = document.querySelector(".slideTrack");
const slides = Array.from(track.children);

const prevBtn = document.querySelector(".slideBtnLeft");
const nextBtn = document.querySelector(".slideBtnRight");

const slideNav = document.querySelector(".slideNav");
const navDots = Array.from(slideNav.children);

// Calculate the size of each slide
const slideWidth = slides[0].getBoundingClientRect().width;
// console.log(slideWidth);

// Arrange the slides next to one another
const setSlidePosition = (slide, index) => {
    slide.style.left = slideWidth * index + 'px';
}
slides.forEach(setSlidePosition);

// When I click next button, slide move to the right
const moveToSlide = (track, currentSlide, targetSlide) => {
    track.style.transform = 'translateX(-'+ targetSlide.style.left +')';
    currentSlide.classList.remove("currentSlide");
    targetSlide.classList.add("currentSlide");
}


nextBtn.addEventListener('click', e => {
    // Check current slide and next slide
    const currentSlide = track.querySelector('.currentSlide');
    const nextSlide = currentSlide.nextElementSibling;
    const currentDot = slideNav.querySelector('.currentSlide');
    const nextDot = currentDot.nextElementSibling;
    const nextIndex = slides.findIndex(slide => slide === nextSlide);
    // Move that slide
    moveToSlide(track, currentSlide, nextSlide);
    updateDots(currentDot, nextDot);
    hideShowArrows(slides, prevBtn, nextBtn, nextIndex);
});

// When I click previous button, slide move to the left
prevBtn.addEventListener('click', e => {
    // Check current slide and prvious slide
    const currentSlide = track.querySelector('.currentSlide');
    const prevSlide = currentSlide.previousElementSibling;
    const currentDot = slideNav.querySelector('.currentSlide');
    const prevDot = currentDot.previousElementSibling;
    const prevIndex = slides.findIndex(slide => slide === prevSlide);
    // Move that slide
    moveToSlide(track, currentSlide, prevSlide);
    updateDots(currentDot, prevDot);
    hideShowArrows(slides, prevBtn, nextBtn, prevIndex);
});

const updateDots = (currentDot, targetDot) => {
    currentDot.classList.remove('currentSlide');
    targetDot.classList.add('currentSlide');
}
const hideShowArrows = (slides, prevBtn, nextBtn, targetIndex) => {
    if(targetIndex === 0) {
        prevBtn.classList.add("hidenBtn");
        nextBtn.classList.remove("hidenBtn");
    } else if(targetIndex === slides.length - 1) {
        prevBtn.classList.remove("hidenBtn");
        nextBtn.classList.add("hidenBtn");
    } else {
        prevBtn.classList.remove("hidenBtn");
        nextBtn.classList.remove("hidenBtn");
    }
}

// When I click Slide Nav Dots, slide move to that slide
slideNav.addEventListener('click', e => {
    // What slide dot clicked on
    const targetDot = e.target.closest('span');
    
    if(!targetDot) return;

    const currentSlide = track.querySelector('.currentSlide');
    const currentDot = slideNav.querySelector('.currentSlide');
    const targetIndex = navDots.findIndex(dot => dot === targetDot)
    const targetSlide = slides[targetIndex];

    moveToSlide(track, currentSlide, targetSlide);
    updateDots(currentDot, targetDot);
    hideShowArrows(slides, prevBtn, nextBtn, targetIndex);
});

.slider {
    position: relative;
    width: 82%;
    height: 500px;
    padding: 15px 15px 0 15px;
}
.slider .slideContainer {
    position: relative;
    height: 92%;
    overflow: hidden;
}
.slider .slideContainer .slideTrack {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    height: 100%;
    transition: transform 1s ease-in;
}
.slider .slideContainer .slideTrack .slideImage {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    border: 1px solid #dddddd;
    border-radius: 10px 10px 0 0;
    border-bottom: 0;
}
.slider .slideContainer .slideTrack .slideImage img { border-radius: 10px 10px 0 0; }

.slider .slideBtn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    padding: 8px;
    border: 1px solid #dddddd;
    border-radius: 100%;
    background-color: #ffffff;
    box-shadow: 0 1px 4px 1px rgba(0,0,0,0.1);
    transition: 0.2s ease-in-out;
    cursor: pointer;
    z-index: 1;
}
.slider .slideBtn:hover { background-color: #f0f2f5; }

.slider .slideBtn:active { background-color: #e4e6e9; }

.slider .slideBtnLeft { left: 30px; }

.slider .slideBtnRight { right: 30px; }

.slider .hidenBtn { display: none; }

.slider .slideNav {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    border: 1px solid #dddddd;
    border-radius: 0 0 10px 10px;
    background-color: #f0f2f5;
}
.slider .slideNav .slideIndicator {
    width: 15px;
    height: 15px;
    margin-right: 10px;
    border: 2px solid #007d2f;
    border-radius: 100%;
    transition: 0.2s ease-in-out;
    cursor: pointer;
}
.slider .slideNav .slideIndicator.currentSlide { background-color: #007d2f; }

<div class="slider">
                <div class="slideBtn slideBtnLeft hidenBtn">
                    <svg viewBox="0 0 24 24">
                        <path d="M8 4l8 8l-8 8" transform="translate(24 0) scale(-1 1)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </div>
                <div class="slideContainer">
                    <ul class="slideTrack">
                        <li class="slideImage currentSlide">
                            <img src="./images/slider/1.jpg" alt="">
                        </li>
                        <li class="slideImage">
                            <img src="./images/slider/2.jpg" alt="">
                        </li>
                        <li class="slideImage">
                            <img src="./images/slider/3.jpg" alt="">
                        </li>
                    </ul>
                </div>
                <div class="slideBtn slideBtnRight">
                    <svg viewBox="0 0 24 24">
                        <path d="M8 4l8 8l-8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
                    </svg>
                </div>

                <div class="slideNav">
                    <span class="slideIndicator currentSlide"></span>
                    <span class="slideIndicator"></span>
                    <span class="slideIndicator"></span>
                </div>
            </div>

Answer 1

我不建议你使用的方式，因为它太乱了，所以我使用for循环和array重建你的代码。

*我没有套用你的Css代码，但我觉得应用起来很容易。

代码：

let arr = ['https://blogs.stthomas.edu/english/files/2016/04/Wikipedia-Logo.jpg','https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvyhm32s-UFL5RT94ozSkQdLrjWiVGd4sogw&usqp=CAU',"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKJMsaA28A32PrOKnj_PqUF1PezvB1bAygtQ&usqp=CAU"];
let img = document.querySelector('img')
let index = 0;
let interval;
document.querySelector('#previous').addEventListener('click',function(){
      window.clearInterval(interval)
index-=1;
    if(index<0){
        index = arr.length-1
    }
    img.src = arr[index]
     interval = setInterval(start,3000);
})
document.querySelector('#next').addEventListener('click',function(){
      window.clearInterval(interval)
      console.log(index)
            index+=1;
      if(index >= arr.length){
        index=0
    }
    img.src = arr[index]
         interval = setInterval(start,3000);
})
for(let i =0;i<arr.length;i++){
    let button = document.createElement('button')
    document.body.appendChild(button)
    button.id = `button${i}`
    button.addEventListener('click',changeimage)

}
function start(){
    img.src = arr[index]

    index++;
    if(index<0){
        index = arr.length-1
    }
    if(index >= arr.length){
        index=0
    }
}
interval = setInterval(start,3000);

function changeimage(){
         window.clearInterval(interval)
    //get the index of which button being clicked
     let id = this.id.replace(/\D/g,'')
     img.src =arr[id]
     i=parseInt(id)
     interval = setInterval(start,3000);
}

img{
    width: 200px;
    height: 100px;
}

<img src="https://blogs.stthomas.edu/english/files/2016/04/Wikipedia-Logo.jpg">
                <button id='previous'>&#10094;</button>
               <button id='next'>&#10095;</button>

Answer 2

对于您使用的滑块

<input type="range" min="1" max="100" value="50" class="slider" id="myRange">

你可以去https://www.w3schools.com/howto/howto_js_rangeslider.asp

function move() {
document.getElementById("myRange").value = "90"
}