Autor Zpráva
doby92
Profil *
Zdravím,

s jako funkcí v jQuery můžu postupně s intervalem procházet tagy se stejnou třídou, či identifikátorem? Jde mi o to, že si chci vytvořit slideshow, kde se bude měnit pouze opacity...

Předem děkuji za odpověď.

<ul class="slides">
<li class="viewport_gallery_slide home_gallery_slide_1">IMG1</li>
<li class="viewport_gallery_slide home_gallery_slide_2">IMG2</li>
<li class="viewport_gallery_slide home_gallery_slide_3">IMG3</li>
</ul>
Taps
Profil
doby92:
nestačilo by ti toto řešení Plynulá změna obrázků ?
doby92
Profil *
Bohužel ne...

mezi tady <li> budou objekty s dalšími prvky který budou mít taky svůj efekt.
Kcko
Profil
doby92:
S obyčejným fadeIn / fadeOut ; případně FadeTo a nějakým setTimeout či setInterval
Sliderů je na netu spousty a spousty z nich umí i fadeovat (tj, měnit průhlednost a prosvítat za jiný).

Např.
kenwheeler.github.io/slick
bxslider.com
doby92
Profil *
<ul class="slides">
<li class="viewport_gallery_slide home_gallery_slide_1 active-slide" style="opacity: 1; z-index: 2;">IMG1</li>
<li class="viewport_gallery_slide home_gallery_slide_2" style="opacity: 0; z-index: 1;">IMG2</li>
<li class="viewport_gallery_slide home_gallery_slide_3" style="opacity: 0; z-index: 1;">IMG3</li>
</ul>

var pause = 3000;
var interval;

function startSlider(){
    interval = setInterval(function() {
        $('active-slide').animation({opacity: 0, 'z-index: 1'},  1000);
        $('active-slide').next().addClass('active-slide');
        $('active-slide').prev().removeClass('active-slide');
        $('active-slide').prev().animation({opacity: 1, 'z-index: 2'},  1000);
    }, pause);
}

startSlider();

nějak takto?


Toto už je funkční, jen se to neopakuje furt dokola.... dojde to na poslední <li> a zpět na začátek se to nevrátí....víte někdo jak to zacyklit?

$(function () {
    var pause = 4000;
    var interval;
    function startSlider() {
        interval = setInterval(function () {
            $('li.active-slide').animate({
                opacity: 1,
            }, 3500);
            $('li.active-slide').next().addClass('active-slide');
            $('li.active-slide').prev().removeClass('active-slide');
            $('li.active-slide').prev().animate({
                opacity: 0,
            }, 3500);
        }, pause);
    }

    startSlider();

});
doby92
Profil *
Kcko:
zkouším tam zapojit if, ale nevím jak nastavit podmínku, aby mi to detekovalo, že už to je na posledním <li>

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: