Slider 或向后旋轉圖像不起作用

Question

再會

我正在自己自動和手動地在 JavaScript 中制作 slider，我不想使用 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

在這里的評論中：

-- 如果你想要我有一個完整的 slider 代碼，它非常接近你正在尋找的。 ——喬喬先生
-- 我已經做到了，但是看到你的 slider 也不錯。 – 豪爾赫·羅哈斯 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" >&LT;</button> <button id="timer-bt" title="timer play/pause" ></button> <button id="movNext" title="next" >&GT;</button>

Answer 2

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