问题描述
美好的一天
我正在用 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">></div>
<div id="btn_left" class="btn_slider"><</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>
提前致谢。
解决方法
在此处的评论中：
--如果你想要我有一个完整的滑块代码，它非常接近你要找的东西。 – 乔乔先生
-- 我已经做到了，但看到你的滑块也不错。 – 豪尔赫·罗哈斯 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 : '\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>您没有更新您的 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">></div>
<div id="btn_left" class="btn_slider"><</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>