制作一个Juffle Shuffle画廊 [英] Making a Jquery shuffle Gallery

问题描述

我正在尝试随机播放幻灯片，例如本网站.这是一个具有随机播放和淡入淡出的图片库，但是我只有以下代码:

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.

推荐答案

这是您的意思吗(使用 jQuery )

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();
    })();
});​

演示 .

更新:也许您想要一个随机排序的图像动画，例如 这个 .

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

这篇关于制作一个Juffle Shuffle画廊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！