我有一个HTML幻灯片放映代码，但是当使用chrome或mozzila时，有时刷新页面时，所有图像都会堆叠起来_Html_Css_Slideshow

我有一个HTML幻灯片放映代码，但是当使用chrome或mozzila时，有时刷新页面时，所有图像都会堆叠起来

html css

我有一个HTML幻灯片放映代码，但是当使用chrome或mozzila时，有时刷新页面时，所有图像都会堆叠起来,html,css,slideshow,Html,Css,Slideshow,我正在尝试使用HTML+CSS制作幻灯片但当使用chrome或mozzila时，有时刷新页面时，所有图像都会堆积起来在IE上运行良好在此处输入代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="

我正在尝试使用HTML+CSS制作幻灯片但当使用chrome或mozzila时，有时刷新页面时，所有图像都会堆积起来在IE上运行良好

在此处输入代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-    strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A.R.Grada</title> 
<link data-turbolinks-track="true" href="/assets/custom.css?body=1" media="all"     rel="stylesheet" />

<link data-turbolinks-track="true" href="/assets/inscricaos.css?body=1" media="all"  rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/scaffolds.css?body=1" media="all"  rel="stylesheet" />
 <link data-turbolinks-track="true" href="/assets/static_page.css?body=1" media="all"    rel="stylesheet" />
 <link data-turbolinks-track="true" href="/assets/users.css?body=1" media="all" rel="stylesheet" />
 <link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/inscricaos.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/slideShow.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="b/G7IFct+anugyX+DeDZhI5xYSzmREjC2Y2uPXx7HHA=" name="csrf-token" />
  <!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
  </script>
<![endif]-->
</head>
<body>
<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <a href="/" id="logo">Associação Recreativa de Grada</a>
    <nav>
      <ul class="nav navbar-nav pull-right">
        <li><a href="/">Pagina inicial</a></li>
        <li><a href="#">Mapa</a></li>
         <li><a href="/static_page/xxx">xxx</a></li>

      </ul>
    </nav>
  </div>
</header>
<div class="container">


 <div class="center jumbotron">



 <div id="slideShowImages" class="slideshow">


<img alt="1" src="/assets/1.jpg" />

<img alt="2" src="/assets/2.jpg" />

<img alt="3" src="/assets/3.jpg" />

<img alt="4" src="/assets/4.jpg" />

<img alt="5" src="/assets/5.jpg" />

<img alt="6" src="/assets/6.jpg" />



  </div>  



   <script src="slideShow.js"></script>





 </h2>
  <a href="/inscricaos/new">|Inscrição |</a>
  <a href="/inscricaos">| Lista incritos|</a> 


  </div>


  <div class="logo">

 </h1>
  <a href="http://rubyonrails.org/"><img alt="xxx_logo" src="/assets/logo.png" /></a>
 </div>







 <footer class="footer">
  <nav>
  <ul>
    <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="http://news.railstutorial.org/">News</a></li>
   </ul>
 </nav>
</footer>
 </div>
 </body>
 </html>

图像将堆叠在屏幕上方。要解决此问题，我必须按CTRL-F5。我无法上传imge，因此我尝试用以下内容进行解释：看起来是这样的：图1 图2 图3 图4

应该是这样的图1

等一秒钟

图2

…

首先尝试使用CSS隐藏图像。页面必须未完全加载才能运行脚本

 .slideshow
 {
 background-colour:#F5F5F5; border:1px solid #FFFFFF; height:340px; margin:150px auto 0;            position:relative; width:640px; -moz-box-shadow:0 0 22px #111; -webkit-box-shadow:0 0 22px #111; box-     shadow:0 0 22px #111;


  }