Slider sorunu

onlywhatchess 1394 gün önce

495 defa görüntülendi

Merhabalar,

Kendi başıma slider yapmaya çalışıyorum.
İstediğim özellikleri belirlenen saniyede ve butonlara tıklanınca resmimler arası geçiş yapması.

Soruna gelicek olursak istediğim özellikleri bir araya getirdiğimde:

Varsayalım 4 saniyede geçiş yapması için ayarladık.
Butona basılırsa bu 4 saniye baştan başlamak yerine kaldığı yerden devam ediyor.

Yani 2 saniye geçtikten sonra butona basarsak başka bir resme geçiş yapıyor ama 4 saniye sonra yeni resme geçmesi gerekirken kalan 2 saniyede başka bir resme geçiş yapıyor.

Saniye ile geçiş yapmayan hali aşağıdaki gibi.


<div id="slideShowContainer">
            
    <div class="slideItem">
        <img src="https://via.placeholder.com/1326x500/efefef" width="100%" alt="">
    </div>
    <div class="slideItem">
        <img src="https://via.placeholder.com/1326x500/777" width="100%" alt="">
    </div>
    <div class="slideItem">
        <img src="https://via.placeholder.com/1326x500/000" width="100%" alt="">
    </div>
    
    <span class="prev" onclick="controlIndex(-1)">Geri</span>
    <span class="next" onclick="controlIndex(1)">İleri</span>
    
</div>


// slider.js

var slideItem = document.getElementsByClassName('slideItem');
var slideIndex = 1;
slideControl(slideIndex);

function controlIndex(a) {
    slideIndex += a;
    slideControl(slideIndex);
}

function slideControl(a) {
    
    var i;
    
    if (a == 0) {
        slideIndex = slideItem.length;
    }
    if(a > slideItem.length) {
        slideIndex = 1;
    }
    
    for(i = 0; i < slideItem.length; i++){
        slideItem[i].style.display = 'none';
    }
    
    slideItem[slideIndex-1].style.display = 'block';   

}

ilyasbilgihan

1390 gün önce

Javascriptteki setInterval fonksiyonu yardımıyla her 4 saniyede bir revize ettiğim controlIndex fonksiyonu a = 1 ve clicked = false parametreleriyle çalışıyor. Sonuç olarak 4 saniyede bir sonraki slide gözüküyor.
Eğer kullanıcı tıklama işlemi yapmamışsa interval fonksiyonumuz çalışmaya devam ediyor. Fakat tıklama işlemi yapıldığında interval fonksiyonumuz clearlanıyor ve tekrar başlatılıyor.

var slideItem = document.getElementsByClassName('slideItem');
var slideIndex = 1;
slideControl(slideIndex);

var interval = setInterval(function(){        // xxx
    controlIndex(1, false);                   // xxx
}, 4000);                                     // xxx


function controlIndex(a, clicked = true) {    // xxx
    if(clicked){                              // xxx
        clearInterval(interval);              // xxx
        interval = setInterval(function(){    // xxx
            controlIndex(1);                  // xxx
        }, 4000);                             // xxx
    }                                         // xxx
  
    slideIndex += a;
    slideControl(slideIndex);
}

// gerisi senin kodunla aynı

( Eklediğim kısımlar belli olsun diye xxx yorumlarıyla belirttim. )

#003634

Soru detay sayfasını görüntüle