javascript - 将图像放在滑块的项目符号中

Question

我正在尝试使用给定的滑块制作推荐页面。我希望在给定滑块的项目符号（带有进度条的 svg 项目）中插入不同的图像，以使每个项目符号都具有在活动幻灯片中提到其详细信息的人的图像。

我尝试插入图像，但我不太了解如何在每个项目符号中插入不同的图像。

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 : '\1405'; }
button#timer-bt.onRun:before { content : '\2161'; }

<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>

标签： javascripthtmljquerycssslider