向后的图像滑块或轮播不起作用

Question

美好的一天

我自己在 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>

提前致谢。

Answer 1

您没有更新 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>

Answer 2

在这里评论：

-- if you want i have a full slider code, it is very close to what you are looking for. – Mister Jojo
-- I already made it, but it would not be bad to see your slider. – Jorge Rojas C.

这里是：

const
  imgSlider = document.querySelector('#imgSlider')
, btTimer   = document.querySelector('#timer-bt')
, bullets   = document.querySelector('#bullets')
  ;
const imgMover = (function()
  {
  var 
    currentImg = 0
  , sel_bullet = 'current' // 'timer-action'
  , timerMod   = false
    ;
  const
    bullet_list = [...document.querySelectorAll('#imgSlider > figure')].map((fig,i)=>
      {
      if (i) fig.classList.add('onRight')
      let sp = document.createElement('span')
      if (i===currentImg) sp.className = sel_bullet
      sp.dataset.ref = i
      sp.innerHTML = `
        <svg viewbox="0 0 90 90">
          <circle class="progress" cx="46" cy="46" r="33" ></circle>
          <circle class="bull" cx="46" cy="46" r="23" ></circle>
        </svg>`
      bullets.appendChild(sp)
      return sp
      })
  , imgCount = bullet_list.length
    ;
  setTimeout(() => { btTimer.click() }, 100)

  return {
    setTimerMod( bool )
      {
      if (timerMod != bool)
        {
        let newCL = bool ? 'timer-action' : 'current' 
        bullet_list[currentImg].classList.add(newCL)
        bullet_list[currentImg].classList.remove(sel_bullet)
        sel_bullet = newCL 
        timerMod   = bool
        btTimer.classList.toggle('onRun',timerMod) 
        }
      }
  , movTo(imgMov, targetImg = 0)
      {
      if ( imgMov === 0 )
        { imgMov = targetImg - currentImg }
      else
        { targetImg = (currentImg +imgMov +imgCount) % imgCount }

      let inPosCl  = (imgMov > 0) ? 'onRight'   : 'onLeft'
        , outPosCl = (imgMov > 0) ? 'hideLeft' : 'hideRight'
        , imgOut   = currentImg
        ;
      currentImg = targetImg

      if (targetImg !== imgOut)
        {
        bullet_list.forEach((bull,indx) => bull.classList.toggle(sel_bullet, (indx===currentImg)))
        
        imgSlider.querySelector(`figure:nth-of-type(${targetImg +1})`).className = inPosCl
        setTimeout(() =>
          {
          imgSlider.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) 
  }
movPrev.onclick = () =>
  {
  imgMover.setTimerMod( false )
  imgMover.movTo(-1) 
  }
bullets.onclick = ({target}) =>
  {
  let bull = target.closest('span[data-ref]')
  if (!bull) return
  imgMover.setTimerMod( false )
  imgMover.movTo(0, +bull.dataset.ref)
  }
btTimer.onclick = () =>
  {
  imgMover.setTimerMod( btTimer.classList.toggle('onRun') )
  }
bullets.ontransitionend = ({target}) =>
  {
  if (!target.matches('circle.progress')) return
  imgMover.movTo(+1) 
  }

:root {
  --timer-delay : 3s;
  --szH         : 300px;
  --szW         : 400px;
  --img-trans   : 1s;
  }
#imgSlider {
  display    : block;
  width      : var(--szW);
  height     : var(--szH);
  overflow   : hidden;
  position   : relative;
  }
#imgSlider figure {
  position : absolute;
  display  : block;
  width    : var(--szW);
  height   : var(--szH);
  left     : 0;
  margin   : 0;
  padding  : 0;
  }
#imgSlider figure figcaption {
  display          : block;
  width            : calc( var(--szW) - 80px );
  height           : 50px;
  text-align       : center;
  transform        : translate(40px, -60px);
  background-color : #00000080;
  color            : crimson;
  font-size        : 2em;
  font-weight      : bold;
  line-height      : 50px;
  border-radius    : 20px;
  }
#imgSlider figure.hideLeft {
  left       : calc( var(--szW) * -1 );
  transition : var(--img-trans);
  }
#imgSlider figure.hideRight {
  left       : var(--szW);
  transition : var(--img-trans);
  }
#imgSlider figure.onLeft {
  left      : calc( var(--szW) * -1 );
  }
#imgSlider figure.onRight {
  left      : var(--szW);
  }
#imgSlider figure.onShow {
  left       : 0;
  transition : var(--img-trans);
  }
#bullets {
  position   : relative;
  margin     : 1em;
  }
#bullets span {
  width      : auto;
  height     : auto;
  margin     : 0;
  background : 0;
  }
#bullets svg {
  transform  : scale(.8) rotate(-90deg);
  transition : transform .3s ease;
  width      : 30px;
  height     : 30px;
  }
#bullets span.current svg,
#bullets span.timer-action svg {
  transform  : scale(1) rotate(-90deg);
  }
#bullets circle {
  stroke-dasharray  : 440;
  }
#bullets circle.progress {
  stroke            : #344770;;
  stroke-width      : 6;
  fill              : none;
  stroke-dashoffset : 440;
  }
#bullets span.timer-action circle.progress {
  stroke-dashoffset : 220;
  transition        : linear var(--timer-delay) stroke-dashoffset;
  }
#bullets circle.bull                   { fill: #cccccc; }
#bullets span:hover circle.bull        { fill: #5d83d6; }
#bullets span.current circle.bull, 
#bullets span.timer-action circle.bull { fill: #08075c; }

button {
  width         : 2em;
  font-size     : 1.3em;
  border-radius : 50%;
  font-family   : Verdana, Geneva, Tahoma, sans-serif;
  }
button#timer-bt:before       { content : '05'; }
button#timer-bt.onRun:before { content : '61'; }

<div id="imgSlider">
  <figure><img src="https://picsum.photos/id/102/400/300" ><figcaption>slider 1</figcaption></figure>
  <figure><img src="https://picsum.photos/id/146/400/300" ><figcaption>slider 2</figcaption></figure>
  <figure><img src="https://picsum.photos/id/275/400/300" ><figcaption>slider 3</figcaption></figure>
  <figure><img src="https://picsum.photos/id/106/400/300" ><figcaption>slider 4</figcaption></figure>
  <figure><img src="https://picsum.photos/id/133/400/300" ><figcaption>slider 5</figcaption></figure>
  <figure><img src="https://picsum.photos/id/135/400/300" ><figcaption>slider 6</figcaption></figure>
</div>
<div id="bullets"></div>
<button id="movPrev"  title="previous"         >&LT;</button>
<button id="timer-bt" title="timer play/pause" ></button>
<button id="movNext"  title="next"             >&GT;</button>

向后的图像滑块或轮播不起作用

Slider or Carousel of images backwards doesn't work

javascript

slider

slideshow

carousel