2015-10-18 65 views
0

我会如何让我的代码在一段时间内显示一张图片?我如何让我的代码在一段时间显示一个图像?

<!DOCTYPE html> 
    <html lang ="en"> 
    <head> 
    <title> VIS</title> 
    <meta charset="utf-8"/> 
    <script type="text/javascript" > 

    function showImage(id){ 
      if(document.getElementById(id).style.visibility =='visible') 
      document.getElementById(id).style.visibility = 'hidden'; 
      else 
       document.getElementById(id).style.visibility= 'visible'; 
     } 
    </script> 
    </head> 
    <body> 


    <div style="position: relative; visibility: visible;"> 
    <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" 
       alt="Pumpkins" id="Pum"/> 
    <button onclick="showImage('Pum');">Pumpkins</button> 
    </div> 

    <div style="position: relative; visibility: visible;"> 
    <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" 
       alt="Pumpkins" id="Straw"/> 
    <button onclick="showImage('Straw');">Strawberries</button> 
    </div> 

    <div style="position: relative; visibility: visible;"> 
    <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" 
       alt="Pumpkins" id="Ras"/> 
    <button onclick="showImage('Ras');">Rasberries</button> 
    </div> 








    </body> 

    </html> 

我的代码工作正常,但我想让它显示的时间。当时一个像我点击其中的一个,它会隐藏其他。

用我的代码,可以显示尽可能多的图像,我想要的和尽可能少的图像。我怎么能做到这一点,我可以发送多个ID作为参数?

任何帮助将是伟大的。

+0

http://stackoverflow.com/questions/6641136/what-is-the-best-way-to-implement-multiway-toggle-using-javascript-jquery –

+0

你可以也使所有图像不可见,然后只显示您点击的图像。 –

+0

@Suchit谢谢,但那对我不起作用。 – user3251123

回答

0

尝试这样的:

首先获得所有的图像,并隐藏起来,如果你想要的任何具体在加载时间显示只是忽略index.after加载你正在尝试,你可以做你的按钮操作。如果你想在按钮上隐藏剩下的可见图像,只需获取可见图像并隐藏它并显示点击的图像。

 <!DOCTYPE html> 
 
       <html lang ="en"> 
 
       <head> 
 
       <title> VIS</title> 
 
       <meta charset="utf-8"/> 
 
       
 
       </head> 
 
       <body> 
 
      
 
      
 
       <div style="position: relative; visibility: visible;"> 
 
       <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" 
 
          alt="Pumpkins" id="Pum"/> 
 
       <button onclick="showImage('Pum');">Pumpkins</button> 
 
       </div> 
 
      
 
       <div style="position: relative; visibility: visible;"> 
 
       <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" 
 
          alt="Pumpkins" id="Straw"/> 
 
       <button onclick="showImage('Straw');">Strawberries</button> 
 
       </div> 
 
      
 
       <div style="position: relative; visibility: visible;"> 
 
       <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" 
 
          alt="Pumpkins" id="Ras"/> 
 
       <button onclick="showImage('Ras');">Rasberries</button> 
 
       </div> 
 
       </body> 
 
       <script type="text/javascript" > 
 
       removeVisibility(); 
 
       
 
       function showImage(id){ 
 
         removeVisibility(); 
 
         if(document.getElementById(id).style.visibility =='hidden') 
 
         document.getElementById(id).style.visibility = 'visible'; 
 
        } 
 

 
       function removeVisibility(){ 
 
       var imgs=document.getElementsByTagName('img');//get all the images 
 
       for(var i=0;i< imgs.length;i++){ 
 
      \t imgs[i].style.visibility= 'hidden'; //hide them 
 
       } 
 
          } 
 
       </script> 
 
       </html>

+0

一个解答为零的答案总是可以通过解释你所做的事情来改进,而不是让读者做视觉比较来找到实际的建议。请为您更改的内容和原因添加相关说明。 – jfriend00

+0

@ jfriend00 ji如你所说。 –

+0

好吧,我试着把一个if/if else语句。如果这个隐藏,那么他应该是可见的。 – user3251123

相关问题