Making a Jquery shuffle Gallery

2019-02-27 03:37发布

问题:

I'm trying to do a shuffle slideshow, like this this site. It's a gallery with shuffle and fade but I have only this code:

<div class="slideshow">    
     <img src="http://davy0324.netne.net/dummys/dummy1.jpg">
     <img src="http://davy0324.netne.net/dummys/dummy2.jpg">
     <img src="http://davy0324.netne.net/dummys/dummy3.jpg">
     <img src="http://davy0324.netne.net/dummys/dummy4.jpg">
     <img src="http://davy0324.netne.net/dummys/dummy5.jpg">
</div>

Can you help me please? I've dealt with shuffles codes but they start with a button, but I don't want buttons, I want a automatic gallery, with repeated indefinitely like in the website.

回答1:

Did you mean this (Using jQuery)

$(function(){
    (function(){
        var imgs=$('.slideshow img');
        var i=0;
        function shuffle()
        {
            $(imgs[i]).fadeIn(2000, function(){
                i=(i < imgs.length-1) ? (i+1) : 0;
                setTimeout(function(){
                    $('.slideshow img').fadeOut(2000);
                    shuffle();
                }, 2000);
            });
        }
        shuffle();
    })();
});​

DEMO.

Update: May be you want a random ordered image animation like this one.