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

random slideshow with two images with transitions

本文关键字：图像 幻灯片 随机 两个      更新时间：2024-02-13

我被一个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

我会使用类似的东西

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

现在你们的问题是，当双方都出界时，如何防止这种情况发生。但这不在的问题范围内

相关文章：