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

[PrinceOfPersia]

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.

samo przenikanie możesz zrobić za pomocą efektów CSS3 (transition dokładnie), to Ci trochę uprości kod JS. Tak jak tutaj: http://jsfiddle.net/fgasU/

Generalnie wtedy byś musiał za pomocą JavaScriptu tylko podmienić opacity na to końcowe (czyli z 1 na 0), a CSS by zrobił resztę.

[matijas6113]

Fajnie by było niestety nie działa.... dodałem kod css i zamieniłem kod js :

[PHP] pobierz, plaintext 
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);             */
[PHP] pobierz, plaintext 

na:

[PHP] pobierz, plaintext 
element.style.opacity = "1";
    hide.style.opacity = "0";
[PHP] pobierz, plaintext 

zdjęcia się zmieniają jednak bez efektu przenikania....

[PrinceOfPersia]

bo tam ręcznie podmieniasz niepotrzebnie src. Wywaliłem to i działa:

Kod

element.src = "gfx/home/" + img + ".jpg";

http://jsfiddle.net/fXv3F/

[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ł

[PrinceOfPersia]

za dużo kombinujesz z tym kodem, jakbyś nie kombinował tylko wziął i od zera to napisał, żadne dodatkowe clearIntervale czy timeouty nie byłyby potrzebne (oprócz jednego setInterval), bo sprawa jest banalna, piszesz:

[JAVASCRIPT] pobierz, plaintext 
var images;
var index = 0;
function changeImg()
{ 
       images[index].style.opacity = 0;
       index++;
       if (index >= images.length) index = 0;    
       images[index].style.opacity = 1;    
}    
 
function start()
{
    images = document.querySelectorAll("img");  // "img" to selektor elementu (jak w CSS czy jQuery)
    setInterval(changeImg,5000);
}
[JAVASCRIPT] pobierz, plaintext 

i to jest cały kod JS, potrzebny do zmieniania obrazków.

http://jsfiddle.net/fXv3F/2/

Ten post edytował PrinceOfPersia 2.05.2013, 12:24:19

[matijas6113]

Przyznaję racje:) Jestem dość początkujący i dlatego ucze się na błędach:) Dzięki wielkie:)