如何解决将图像放入滑块的项目符号中
我正在尝试使用给定的滑块制作推荐页面。我希望在给定滑块的项目符号(带有进度条的 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" ><</button>
<button id="timer-bt" title="timer play/pause" ></button>
<button id="movNext" title="next" >></button>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。