同一图像随机出现在3个不同的div中，间隔为秒

我有3个彩色的div。我想要一个图像出现在随机选择的3个DIV中的一个。例如。如果图像位于第一个div中，则第二个和第三个DIV应该仍然可见但是为空。 3秒后，图像应该消失并重新出现在另一个随机选择的DIV中。同一图像随机出现在3个不同的div中，间隔为秒

目前我只有CSS和HTML。

CSS

.first { 
    float: left; 
    width:33%; 
    display:block; 
    background-color: blue; 
    text-align: center; 
    padding:30px 0; 
} 
.second { 
    float: left; 
    width: 33%; 
    display:block; 
    background-color: green; 
    text-align: center; 
    padding:30px 0; 
} 
.third { 
    float: right; 
    width: 34%; 
    display:block; 
    background-color: red; 
    text-align: center; 
    padding:30px 0; 
}

HTML

<div class="first"><img class="img_first" src="img.png"/></div> 
<div class="second"><img class="img_second" src="img.png"/></div> 
<div class="third"><img class="img_third" src="img.png"/></div>

来源

2015-12-02 Roberts Šensters

这需要一些额外的上下文。图像来自哪里？你想异步加载它吗？你真的想隐藏两个盒子吗？为什么不在首位显示一个？这整个应用程序的原因是什么？您正在描述您想要工作的方式，但也许有更好的方法来解决潜在的问题。 –

我不想隐藏盒子，我只想在显示图像时隐藏2个div的图像。背后的原因更像是一场游戏。 “抓住形象进入下一个层次”。对不起，我的英文不好，如果它很难理解:) –

我相信这是你所要求的东西。选择一个随机div并显示div的嵌套img。

HTML

<div class="first"><img src="duh.jpg"></div> 
<div class="second"><img src="duh.jpg"></div> 
<div class="third"><img src="duh.jpg"></div>

JS/jQuery的

var active = 1; 
var myNum = 1; 
setInterval(function(){ 
    while(active == myNum){ 
     myNum = Math.floor(Math.random() * (3)) + 1; 
    } 
    active = myNum; 
    switch(active) { 
    case 1: 
     $('.first img').show(); 
     $('.second img, .third img').hide(); 
     break; 
    case 2: 
     $('.second img').show(); 
     $('.first img, .third img').hide(); 
     break;   
    case 3: 
     $('.third img').show(); 
     $('.first img, .second img').hide(); 
     break; 
    } 
}, 1000);

这里是一个工作Updated jsfiddle

来源

2015-12-02 13:57:49 magreenberg

这正是我需要的。是否有可能创建它不再选择相同的div？有时候，它只停留在div的3倍，所以总共多出3倍：P –

我更新了代码，因此它不会一次又一次地选择相同的div。 – magreenberg

比我的更整洁的解决方案！ +1 – AdamJeffers

不知道这是否是你的问题的最佳解决方案，但应该给你一个想法，你能怎么处理它？

function cycleImages() 
{  
    var first = $('.img_first') 
    var second = $('.img_second'); 
    var third = $('.img_third'); 

    if(first.css('display') == 'block'){ 
     // Show second image 
     second.show() 

     // Hide previous images 
     first.hide() 
     third.hide() 
    } 

    else if(second.css('display') == 'block'){ 
     // Populate third div 
     third.show() 

     // Clear previous images 
     first.hide() 
     second.hide() 
    } 

    else if(third.css('display') == 'block'){ 
     // Populate first div 
     first.show() 

     // Clear previous images 
     second.hide() 
     third.hide() 
    } 
} 

$(document).ready(function(){ 

    setInterval(cycleImages, 3000); 

});

来源

2015-12-02 13:48:50 AdamJeffers

我做了一个随机隐藏并从三个div中显示。您可以指定应该可见的div数或添加任何进一步的条件。

HTML变化：我添加了一个通用类 “图像”

<div class="image first">same image</div> 
<div class="image second">same image</div> 
<div class="image third">same image</div>

jQuery代码：

setInterval(function(){ 
     var max = 3;var min = 1; 
     var a = Math.floor(Math.random() * max) + min; 

     $('.image:nth-child('+a+')').css('visibility','visible'); 
     $('.image').not(':nth-child('+a+')').css('visibility','hidden'); 

    //if you dont need the position intact just try 
    //$('.image:nth-child('+a+')').show(); 
    //$('.image').not(':nth-child('+a+')').hide(); 
    },3000)

我希望这是你在问什么。

检查工作演示JSFIDDLE

来源

2015-12-02 13:56:59

首先，我不需要隐藏整个div。彩色div始终处于活动状态，我只想更改div内的图像。无论如何，这看起来像我需要的东西。我测试了它，似乎第三个div没有显示出来。 –

你的代码并没有给出第三张图片。你不必做'var a = Math.floor（Math.random（）*（max - min）+ min）;''但只有'var a = Math.floor（Math.random（）* max + min ）;' –

Jsut更改选择器隐藏并显示从 $（'。image：nth-child（'+ a +'）'）。find（'img'）.css（'visibility'，'visible'） ; （'。image'）。not（'：nth-child（'+ a +'）'）。find（''）。css（'visibility'，'hidden'）; 已更新演示 http：// jsfiddle。net/nitish1604/2e0akgy3/3/ –

同一图像随机出现在3个不同的div中，间隔为秒

回答

相关问题