Image slider – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama

Image slider – JavaScript, AJAX, jQuery – Fórum – Programujte.comImage slider – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
jordi18110
Newbie
13. 4. 2017   #1
-
0
-

Ahojte, mám taký problém. Mám vytvorený image slider no ked prepínam medzi stránkami a vrátim sa po chvíli tak mi bugne. Bude lepšie ak to uvidíte na vlastné oči. Netuším čo za tým môže byť. Tu je kód:

HTML

<div id="banner">
                <div id="one" class="cover"></div>
                <div id="two" class="cover"></div>
                <div id="three" class="cover"></div>
                <div id="four" class="cover"></div>
                <div id="five" class="cover"></div>
            </div>

CSS 

#banner {
    position: relative;
    max-width: 100%;
    min-height: 25em;
    background-color: #aaa;
}

.cover {
    width: 100%;
    min-height: 25em;
    position: absolute;
    left: 0;
    top: 0;
}

#one,
#two,
#three,
#four,
#five {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    /*background-attachment: fixed;*/
}

#one {
    background-image: url('../img/pictures/british-airways-2132653_1920.jpg');
}

#two {
    background-image: url('../img/pictures/earth-11595_1920.jpg');
}

#three {
    background-image: url('../img/pictures/norway-2083189_1920.jpg');
}

#four {
    background-image: url('../img/pictures/travel-1756150_1920.jpg');
}

#five {
    background-image: url('../img/pictures/road-2068900_1920.jpg');
}

JS

covers  = $('#banner');
    
    covers.children(':not(:last)').hide();

    setInterval(function() {
        covers.children(':last')
        .fadeOut(2500, function() { $(this).prependTo( covers ); })
        .prev().fadeIn(2500);
    }, 4000);

Link ku stránke:

http://erasmus.studenthosting.sk/Erasmus/index.php

Nahlásit jako SPAM
IP: 91.226.113.–
Reklama
Reklama
peter
~ Anonymní uživatel
2840 příspěvků
18. 4. 2017   #2
-
0
-

Ve FF mi to funguje normalne, ani v JS konzoli to nevypise chybu. Jenom pinda, ze pouzivas zastarale mutation events.
Pokud pouzivas chrome, tak to prosim te odinstaluj, na ten se neda spolehnout, ze se bude chovat spravne nebo najdi jiny kod pro efekt.

Nahlásit jako SPAM
IP: 2001:718:2601:26c:3995:d5...–
weroro0
Newbie
18. 4. 2017   #3
-
0
-

#1 jordi1811
Ako sa prejavuje ten bug? Skúsil by som upraviť ten setInterval. Dal by som ho do premennej a vždy pred jeho volaním by som zavolal clearInterval.

var myInterval; // toto presuň niekde do globálneho Scope.

clearInterval(myInterval);
myInterval = setInterval(function () {
    covers.children(':last')
        .fadeOut(2500, function () {
            $(this).prependTo(covers);
        })
        .prev().fadeIn(2500);
}, 4000);
Nahlásit jako SPAM
IP: 195.91.113.–
Front-end web developer at Azet, a.s. & Ringier Axel Springer Slovakia.
jordi18110
Newbie
19. 4. 2017   #4
-
0
-

Tie mutation events čo ukazuje to je z pluginu. Bug sa prejavuje tak, že ked si otvoríš tú stránku čo som sem prihodil link tak ju nechaj tak a choď na iné stránky popozerať a sem tam keď sa vrátim zbadáš, že miesto obrázku zostane len biely background. Hej riešenie je, že to spravím napríklad cez plugin nejaký alebo úplne inak ale zaujíma ma prečo toto blbne takto hlavne. Keď už tu nenájdem odpoveď tak to prerobím inak.

Nahlásit jako SPAM
IP: 91.226.113.–
peter
~ Anonymní uživatel
2840 příspěvků
20. 4. 2017   #5
-
0
-

Ze tam je bily background by mne az tak netrapilo, pokud to pak naskoci. To je nejspis zpusobeno prohlizecem, ktery se snazi setrit pamet / procesor a tak script zastavi nebo omezi, kdyz to okno nemas aktivni.

Nahlásit jako SPAM
IP: 2001:718:2601:26c:810b:12...–
Zjistit počet nových příspěvků

Přidej příspěvek

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 15 hostů

Podobná vlákna

Slider problém — založil jAkErCZ

Libwave - <gl/image.h> — založil lukas.balaz

Stringgrid + image — založil Tom

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032017 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý