问题描述

您好

我正在自动和手动在JavaScript中制作滑块，我不想使用jQuery或Bootstrap库。

要从一个图像切换到另一个图像，请使用箭头或圆圈(我还没有使它们起作用)；圆圈随着图像的前进而着色，向前移动图像时效果很好，但是向后移动它们(通过单击后退箭头)时，它不会连续前进，它只会保持几秒钟或更长时间的冻结，直到图像变为后退图像。

JavaScript代码：

let index =0;
let aux_index = 0
let aux_circle =0
const images = ['Image1.jpg','Image2.jpg', 'Image3.jpg']
let index_circle = images.length -1
let image_selected = document.getElementById('img_selected')
const circleSection = document.querySelectorAll(".circle-section")
var timeR = setInterval(next, 4000)


image_selected.src = images[0]
circleSection[index_circle].classList.add('current')
index++;
index_circle--;

function next(){
        image_selected.src = images[index]

        for (var i =0 ; i < circleSection.length ; i++) {
            circleSection[i].classList.remove('current')
        }
        circleSection[index_circle].classList.add('current')
        
        index++;
        aux_index = index-1
        aux_circle = index_circle +1
        if (index == images.length) {
            index = 0;
        }
        index_circle--
        if(index_circle < 0){
            index_circle = images.length - 1

        }   
}

function back(){

    if ((aux_index-1) <0) {
        aux_index = images.length
    }
    if (aux_circle == images.length) {
        aux_circle = 0
    }
    image_selected.src = images[aux_index - 1]
    for (var i =0 ; i < circleSection.length ; i++) {
        circleSection[i].classList.remove('current')
    }
    circleSection[aux_circle].classList.add('current')
    index--
    index_circle++
    if (index_circle == images.length ) {
        index_circle =0
    }
    if (index <0) {
        index = images.length -1
    }                  
}
btn_right.addEventListener('click', function(){
    next();
    clearInterval(timeR);
    timeR = setInterval(next, 4000);
})

btn_left.addEventListener('click', function(){
    back()
    clearInterval(timeR);
    timeR = setInterval(next, 4000);
})

部分HTML代码：

 <div class="slider-container">
    <div class="slider" id="slider_id">
        <div class="slider-section" >
            <img class="img_slider" id="img_selected" src="">
        </div>
    </div>
    <div id="btn_right" class="btn_slider">&#62</div>
    <div id="btn_left" class="btn_slider">&#60</div>
</div>
<ul id="circles">
    <li class="circle-section" id="1"></li>
    <li class="circle-section" id="2"></li>
    <li class="circle-section" id="3"></li>
</ul>

提前感谢。

推荐答案

您没有更新aux_index。

在从索引中减去之前添加此内容。

aux_index = index+1

let index =0;
let aux_index = 0
let aux_circle = 0
const images = ['https://placekitten.com/g/200/300','https://placekitten.com/200/300', 'https://placekitten.com/g/400/300']
let index_circle = images.length -1
let image_selected = document.getElementById('img_selected')
const circleSection = document.querySelectorAll(".circle-section")
var timeR = setInterval(next, 4000)


image_selected.src = images[0]
circleSection[index_circle].classList.add('current')
index++;
index_circle--;

function next(){
        image_selected.src = images[index]

        for (var i =0 ; i < circleSection.length ; i++) {
            circleSection[i].classList.remove('current')
        }
        circleSection[index_circle].classList.add('current')
        
        index++;
        aux_index = index-1
        aux_circle = index_circle +1
        if (index == images.length) {
            index = 0;
        }
        index_circle--
        if(index_circle < 0){
            index_circle = images.length - 1

        }   
}

function back(){
    if ((aux_index-1) <0) {
        aux_index = images.length
    }
    if (aux_circle == images.length) {
        aux_circle = 0
    }
    image_selected.src = images[aux_index - 1]
    for (var i =0 ; i < circleSection.length ; i++) {
        circleSection[i].classList.remove('current')
    }
    circleSection[aux_circle].classList.add('current')
    aux_index = index+1
    index--
    index_circle++
    if (index_circle == images.length ) {
        index_circle =0
    }
    if (index <0) {
        index = images.length -1
    }                  
}
btn_right.addEventListener('click', function(){
    next();
    clearInterval(timeR);
    timeR = setInterval(next, 4000);
})

btn_left.addEventListener('click', function(){
    back()
    clearInterval(timeR);
    timeR = setInterval(next, 4000);
})

 <div class="slider-container">
    <div class="slider" id="slider_id">
        <div class="slider-section" >
            <img class="img_slider" id="img_selected" src="">
        </div>
    </div>
    <div id="btn_right" class="btn_slider">&#62</div>
    <div id="btn_left" class="btn_slider">&#60</div>
</div>
<ul id="circles">
    <li class="circle-section" id="1"></li>
    <li class="circle-section" id="2"></li>
    <li class="circle-section" id="3"></li>
</ul>

这篇关于图像的滑块或旋转木马向后不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！