Javascript 向后滑动或旋转图像'；行不通

你好

我自己在JavaScript中自动和手动制作滑块，我不想使用jQuery或引导库

要从一个图像切换到另一个图像，请使用箭头或圆圈（我还没有使它们发挥作用）；当图像前进时，圆圈会被着色，向前移动图像时效果会很好，但向后移动（通过单击后退箭头）时，圆圈不会连续前进，它只会在几秒钟或更长的时间内保持冻结状态，直到更改为后图像

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);
})

let索引=0；
设aux_指数=0
设辅助圆=0
常量images=['Image1.jpg'、'Image2.jpg'、'Image3.jpg']
让索引_循环=images.length-1
让image\u selected=document.getElementById（'img\u selected'））
const circleSection=document.queryselectoral（“.circle节”）
var定时器=设置间隔（下一步，4000）
image_selected.src=图像[0]
circleSection[index_circle].classList.add（'current'）
索引++；
指数_圆--；
函数next（）{
image_selected.src=图像[索引]
对于（变量i=0；i如果（（辅助索引-1）您没有更新您的
辅助索引

在从索引中减去之前添加此项

aux_index = index+1


let索引=0；
设aux_指数=0
设辅助圆=0
常量图像=['https://placekitten.com/g/200/300','https://placekitten.com/200/300', 'https://placekitten.com/g/400/300']
让索引_循环=images.length-1
让image\u selected=document.getElementById（'img\u selected'））
const circleSection=document.queryselectoral（“.circle节”）
var定时器=设置间隔（下一步，4000）
image_selected.src=图像[0]
circleSection[index_circle].classList.add（'current'）
索引++；
指数_圆--；
函数next（）{
image_selected.src=图像[索引]
对于（变量i=0；i
--如果你想让我有一个完整的滑块代码，它非常接近你想要的。-Jojo先生

--我已经做到了，但是看到你的滑杆也不错

这是：


const
imgSlider=document.querySelector（“#imgSlider”）
，btTimer=document.querySelector（“#timer bt”）
，项目符号=document.querySelector（“#项目符号”）
;
常量imgMover=（函数（）
{
变量
电流img=0
，sel_bullet='当前'/'计时器动作'
，timerMod=false
;
常数
bullet_list=[…document.queryselectoral（'#imgSlider>figure'）].map（（图，i）=>
{
如果（i）图classList.add（'onRight'）
设sp=document.createElement（'span'）
如果（i==当前img）sp.className=sel\u bullet
sp.dataset.ref=i
sp.innerHTML=`
`
项目符号。追加子项（sp）
返回sp
})
，imgCount=bullet\u list.length
;
setTimeout（（）=>{btTimer.click（）}，100）
返回{
setTimerMod（布尔）
{
if（timerMod！=bool）
{
让newCL=bool？“计时器操作”：“当前”
项目符号列表[currentImg].classList.add（newCL）
项目符号列表[currentImg].classList.remove（选择项目符号）
sel_bullet=newCL
timerMod=bool
btTimer.classList.toggle（'onRun'，timerMod）
}
}
，movTo（imgMov，targetImg=0）
{
if（imgMov==0）
{imgMov=targetImg-currentImg}
其他的
{targetImg=（当前img+imgMov+imgCount）%imgCount}
让inPosCl=（imgMov>0）？'onRight'：'onLeft'
，outPosCl=（imgMov>0）？'hideLeft'：'hideRight'
，imgOut=当前img
;
currentImg=targetImg
如果（targetImg！==imgOut）
{
bullet_list.forEach（（bull，indx）=>bull.classList.toggle（sel_bullet，（indx==currentImg）））
imgSlider.querySelector（`figure:nth of type（${targetImg+1}）`）。className=inPosCl
设置超时（（）=>
{
querySelector（`figure:nth of type（${imgOut+1}）`）。className=outPosCl
imgSlider.querySelector（`figure:nth of type（${targetImg+1}）`）。className='onShow'
},20);
} } } }
)()
movNext.onclick=（）=>
{
imgMover.setTimerMod（false）
imgMover.movTo（+1）
}
movprov.onclick=（）=>
{
imgMover.setTimerMod（false）
imgMover.movTo（-1）
}
bullets.onclick=（{target}）=>
{
设bull=target.nexist（'span[data ref]'））
如果（！bull）返回
imgMover.setTimerMod（false）
imgMover.movTo（0，+bull.dataset.ref）
}
btTimer.onclick=（）=>
{
setTimerMod（btTimer.classList.toggle（'onRun'））
}
bullets.ontransitionend=（{target}）=>
{
如果（！target.matches（'circle.progress'））返回
imgMover.movTo（+1）
}
：根目录{
--定时器延时：3s；
--szH:300px；
--szW:400px；
--img-trans:1s；
}
#imgSlider{
显示：块；
宽度：var（--szW）；
高度：var（--szH）；
溢出：隐藏；
位置：相对位置；
}
#imgSlider图{
位置：绝对位置；
显示：块；
宽度：var（--szW）；
高度：var（--szH）；
左：0；
保证金：0；
垫
aux_index = index+1