JS, własna galeria/animacja problem migotania zdjęć Opcje

[matijas6113]

Witam
Otóż tworzę dla siebie stronkę i mam własną galerię/animacje napisaną w JS. Ma ona za zadania automatycznie zmieniać zdjęcia po określonym czasie (taki pokaz slajdów jakby) przy czym przy zmianie ze zdj A na zdj B chciałem otrzymać efekt przenikania. Kod działa ok poza jednym wyjątkiem: otóż kiedy w przeglądarce przejde na inną zakłądkę i wrócę za chwile do strony to zdjęcia tak jakby migotają (tak jakby skrypt przełączania zdj się zawiesił i chciał nadrobić wszystko) po czym wszyskto sie normuje i działa ok.

O to kody:

[PHP] pobierz, plaintext 
var img = 1;
function changeImg()
{
    img = img + 1;
    if(img % 2 == 1) 
    {
        var element = document.getElementById("img1");
        var hide = document.getElementById("img2");
    }
    else 
    {
        var element = document.getElementById("img2");
        var hide = document.getElementById("img1");
    }
 
    element.src = "gfx/home/" + img + ".jpg";
 
    var value = 0;
    var i = 0;
 
    var changeClock = self.setInterval(function()
    {
        value = i * 0.025;
        setTimeout(function(){
            element.style.opacity = value.toFixed(2)
            }, 0);
        setTimeout(function(){
            hide.style.opacity = (1-value.toFixed(2))
            }, 10);
        i++;
        if(i == 40) clearInterval(changeClock);
    },80);             
 
    if(img >= 9) img = 0;
}
 
function start()
{
    var int = self.setInterval(function(){
        changeImg()
        },5000);
}
[PHP] pobierz, plaintext 

tutaj kod html który współpracuje z kodem js.

[HTML] pobierz, plaintext 
<div style="margin: 0 auto; text-align: center; position: relative;">
   <img id="img1" src="gfx/home/1.jpg" onclick="changeImg()" style="width: 770px; height: 515; z-index: 9901; border: 6px solid whitesmoke; position: absolute; left: 50%; margin-left: -385px; top: 0;">
   <img id="img2" src="gfx/home/2.jpg" onclick="changeImg()" style="width: 770px; height: 515; z-index: 9900; border: 6px solid whitesmoke; visibility: visible; position: absolute; left: 50%; margin-left: -385px; top: 0;">
   <script type="text/javascript">window.onload = start();</script>
</div>
[HTML] pobierz, plaintext 

Wiem, że niektórzy mi powiedzą, że popełniłem wiele błędów w kodzie albo, że moge zastosować jakiegoś gotowca ale nie o to tutaj chodzi. Chce coś zrobić sam bo lubie. Chce też osiągnąć taki efekt wizualny jak mi sie podoba tak więc proszę o wyrozumiałość i pomoc związaną z tematem.

Pozdrawiam.

Ten post edytował matijas6113 1.05.2013, 14:31:20

[matijas6113]

Ok, rozumiem. tylko że zdjęć będzie więcej niż dwa. Ogólnie udało mi sie rozwiązać problem:) praktycznie działa tak jak powinno:)

zaraz za pętlą robiącą "przejście" dodałem taki kod:

[PHP] pobierz, plaintext 
setTimeout(function() {changeClock = window.clearInterval(changeClock); }, 5000);
[PHP] pobierz, plaintext 

Ogólnie dziękuje Ci za pomoc:) napewno komuś sie to przyda jak będzie szukał(IMG:style_emoticons/default/smile.gif)