Question

我坚持使用javascript两个图像'幻灯片'随机间隔随机出现的图像。到目前为止它工作，但现在我想在显示和隐藏图像时添加转换。我想知道是否可以随机显示一张图片。

到目前为止我有这个代码：

var j;
var rand = 700;
function randomize() {
    loadRandom();
    rand = Math.round(Math.random()*(5000-700+1))+700; 
    clearInterval(j);
    j = setInterval('randomize();', rand);
}
j = setInterval('randomize();', rand);



function loadRandom(){
    var ranNums=[];
    while(ranNums.length<7){
        var t=Math.floor((Math.random()*7)+1);
        if(ranNums.indexOf(t)==-1)
            ranNums.push(t);
    }
    var i=0;
    $('#imageTable > .image-container > img').each(function(){
        $(this).attr('src','images/image-'+ranNums[i]+'.jpg');
        i++;
    });
}

这是在线：http://www.steef.111mb.de

我希望有人可以帮助我，欢呼声。

编辑：我添加了 fadeIn ，但仍需要弄清楚如何使用 fadeOut 。为了只显示一张图片我在Math.random（）使用更高的数字，因为我有图片隐藏了丢失的图像图标。我知道这不是干净的代码，但无法弄清楚如何做得更好。我现在想知道当同一图像连续显示两次时是否可以禁用 fadeIn / fadeOut 。

var j;
var rand = 900;
function randomize() {
    loadRandom();
    rand = Math.round(Math.random()*(7000-900+1))+900; 
    clearInterval(j);
    j = setInterval('randomize();', rand);
}
j = setInterval('randomize();', rand);

function loadRandom(){
    var ranNums=[];
    while(ranNums.length<7){
        var t=Math.floor((Math.random()*8)+1);
        if(ranNums.indexOf(t)==-1)
            ranNums.push(t);
    }
    var i=0;
    $('#imageTable > .image-container > img').each(function(){
        $(this).attr('src','images/image-'+ranNums[i]+'.jpg');
        i++;
    });
    $("img").hide();
    $("img").fadeIn(500);
    $("img").error(function(){
            $(this).hide();
    }); 
};

http://steef.111mb.de//index2.html

Answer 1

我会选择这样的东西

$("img").hide();
    $('#imageTable > .image-container > img').each(function(){
          if(ranNums[i]<=7)
           {$(this).attr('src','images/image-'+ranNums[i]+'.jpg');
            $(this).fadeIn(500);
           }

        i++;
    });

现在你的问题是如何防止两者都出界的情况。但这不是问题的范围

带有两个带过渡的图像的随机幻灯片

1 个答案: