v2.5.2
Giriş yap

Slider sorunu

onlywhatchess
494 defa görüntülendi
1

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

}
html javascript
Cevap yaz
Cevaplar (1)
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. )

1
#003634