Question

我设计了一个带有JS幻灯片的页面，但是在FF测试时，画廊缩小到大约600px宽，高度为10px？

此外，在IE中没有循环/幻灯片显示。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Camera Rotation</title>

<link href="../CSS/test_style.css" rel="stylesheet" type="text/css" >

<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<style type="text/css">

</style>
<script>

var Image_slide = new Array(
    "../Images/Camerarotation/sat01.jpg", 
    "../Images/Camerarotation/sat02.jpg",
    "../Images/Camerarotation/sat03.jpg",
    "../Images/Camerarotation/sat04.jpg",
    "../Images/Camerarotation/sat05.jpg",
    "../Images/Camerarotation/sat06.jpg", 
    "../Images/Camerarotation/sat07.jpg"
    );
var index = 0;

function slide(){
    document.slideshow.src = Image_slide[index];
    index++;
    if(index > (Image_slide.length-2)){ index = 0; }
}
function auto(){
    window.setInterval(slide, 1000);
}

window.onload = auto();

</script>
</head>

<body onload="MM_preloadImages('../Images/facebook.png','../Images/flickr.png','../Images/300px-Instagram_logo.png','../Images/twitter.png')">
<center>
<div class="Container">
  <h1>GARY HORNE PHOTOGRAPHY</h1>
  <!-- Header -->
  <ul id="MenuBar1" class="MenuBarHorizontal">
     <li><a href="index.html">Home</a></li>
    <li><a href="blog.html">Blog</a></li>
    <li><a class="MenuBarItemSubmenu" href="#">Gallery</a>
   <ul>
        <li><a href="camerarotation.html">Camera Rotation</a></li>
        <li><a href="london.html">London</a></li>
        <li><a href="lighttrails.html">Light Trails</a></li>
        <li><a href="project365.html">Project 365</a></li>
        <li><a href="blacknwhite.html">Black n White</a></li>
        <li><a href="light-paint.html">Light-Paint</a></li>
        <li><a href="life.html">Life</a></li>
        <li><a href="earth.html">Earth</a></li>
      </ul>
    </li>
    <li><a href="useful_links.html">Useful Links</a></li>
    <li><a href="contact.html">Contact</a></li>
    </ul>
  <!-- Nav_Bar -->

  </br>

<img src="../Images/Camerarotation/7.jpg" height="400" width="600" id="slideshow" />

<div class="Social_images"><a href="www.facebook.com/garyHornePhotography" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('facebook','','../Images/facebook.png',1)"><img src="../Images/Facebook bnw.png" alt="facebook" width="30" height="30" border="0" id="facebook" />
  </a> <a href="www.flickr.com/ghp-1968" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Flickr','','../Images/flickr.png',1)"><img src="../Images/flickr bnw.png" alt="Flickr" width="30" height="30"border="0" id="Flickr" /></a> 
  <a href="http://instagram.com/ghp1968#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Instagram','','../Images/300px-Instagram_logo.png',1)"><img src="../Images/300px-Instagram_logo bnw.png" alt="Instagram" width="30" height="30" border="0" id="Instagram" /></a> 
  <a href="www.twitter.com/ghp-1968" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Twitter','','../Images/twitter.png',1)"><img src="../Images/twitter bnw.png" alt="Twitter" width="30" height="30" border="0" id="Twitter" /></a> </div>
  <!-- social_images -->
  </br>
  <hr />
  <div class="footer_left">&copy; Gary Horne Photography. All Rights Reserved</div>
  <!-- Footer -->
  <div class="footer_right"> <img src="../Images/signature.png" width="40" height="20" alt="" /> </div>
  <!-- Signature -->
</div>
<!-- Container -->
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});</script>

</center>
</div>
<!-- container -->
</body>
</html>

网页中的JS幻灯片

0 个答案: