正在尝试编写javascript幻灯片，但图像在一段时间后没有对齐

我正在建立这个网站，其中包含一个用javasript编写的图像幻灯片。下面是相关的html

 <table>
    <tr>
      <td id="firstelement">
        <div id="leftsidebar"> 
          <img class="leftslide" src="/images/IMG_96768613163825.jpeg">
          <img class="leftslide" src="/images/IMG_96772192197469.jpeg">
          <img class="leftslide" src="/images/IMG_96781303842831.jpeg">
          <img class="leftslide" src="/images/IMG_96785091848819.jpeg">
          <img class="leftslide" src="/images/IMG_96764834500597.jpeg">
        </div>
      </td>
      <td id="secondelement">
        <div id="slideshow">
          <img class="slide" src="/images/IMG_96764834500597.jpeg">
          <img class="slide" src="/images/IMG_96768613163825.jpeg">
          <img class="slide" src="/images/IMG_96772192197469.jpeg">
          <img class="slide" src="/images/IMG_96781303842831.jpeg">
          <img class="slide" src="/images/IMG_96785091848819.jpeg">
        </div>
      </td>
      <td id="thirdelement">      
        <ul id="announcements"><h3>Announcements</h3>
          <li class="announcement">Announcement #1 - Dates and times could go here, along with a short description of the announcement.</li><hr>
          <li class="announcement">Announcement #2 - These could just be links to pages that have fliers or other representations of the announcements.</li><hr>
          <li class="announcement">Announcement #3 - Could even add images, experiment with fonts, etc.</li><hr>
          <li class="announcement">Announcement #4 - These would change as needed. I am only adding generic text because I am not aware of any current announcements that need posted.</li><hr>
         </ul>
       </td>       
   </tr>
 </table>  

公告
announcement#1-日期和时间可以放在这里，并附上简短的公告说明。

announcement#2-这些可能只是指向包含传单或其他公告表示的页面的链接。

announcement#3-甚至可以添加图像、尝试字体等。

announcement#4-这些将根据需要进行更改。我只添加一般文本，因为我不知道当前有任何需要发布的公告。

下面是slideshow.js，它可以运行

// Global variables
var numslides = 0;
var numleftslides = 0;
var currentslide = 0, oldslide = 4;
var slide1 = 0;
var slide2 = 1;
var slide3 = 2;
var slide4 = 3;
var slide5 = 4;
var x = 0;
var a = 0;
var b = 240;
var c = 480;
var d = 720;
var e = 960;
var picWidth = 0;
var leftPicHeight = 0;
var slides = new Array();
var leftslides = new Array();
function makeSlideShow() {
  // hide the nav bar options
  setupMenu();
  // find all images with the class "slide"
  imgs = document.getElementsByTagName("img");
  for (i = 0; i < imgs.length; i++) {
    if (imgs[i].className != "slide" && imgs[i].className != "leftslide") continue;
    else if (imgs[i].className == "slide" ) {
      slides[numslides] = imgs[i];
      jQuery("#slideshow").css('width', jQuery(slides[numslides]).css('width'));

      // stack images with first slide on top
      if (numslides == 0) {
        imgs[i].style.zIndex = 10;
      }
      else {
        imgs[i].style.zIndex = 0;
      }
      //imgs[i].onclick = nextSlide;
      numslides++;
    }
    else {
      leftslides[numleftslides] = imgs[i];   
      numleftslides++;
    }
  } // end for loop
  nextSlide();
} // end makeSlideShow()
function nextSlide() {
  // Set current slide to be under the new top slide
  slides[currentslide].style.zIndex = 9;
  // Move older slide to the bottom of the stack
  slides[oldslide].style.zIndex = 0;

  oldslide = currentslide;
  currentslide++;

  if (currentslide >= numslides) currentslide = 0;

  // start at the right edge
  picWidth = parseInt(jQuery(slides[currentslide]).css('width'));
  jQuery(slides[currentslide]).css('left', -picWidth + "px");

  x = -picWidth;

  // Move the new slide to the top
  slides[currentslide].style.zIndex = 10;

  if (a < 0) a = 960;
  if (b < 0) b = 960;
  if (c < 0) c = 960;
  if (d < 0) d = 960;
  if (e < 0) e = 960;

  animateSlide();
  window.setTimeout("nextSlide();", 5000); 
}
function animateSlide() {
  // Lower moves slower, higher moves faster
  x = Math.min(0, x + 7);
  a = Math.max(-240, a - 2);
  b = Math.max(-240, b - 2);
  c = Math.max(-240, c - 2);
  d = Math.max(-240, d - 2);
  e = Math.max(-240, e - 2);

  // previous image moves off the left edge
  // (comment the next line for a different effect)
  jQuery(slides[oldslide]).css('left', (x + picWidth) + "px");
  jQuery(slides[currentslide]).css('left', x + "px");

  jQuery(leftslides[slide1]).css('top', a + "px");
  jQuery(leftslides[slide2]).css('top', b + "px");
  jQuery(leftslides[slide3]).css('top', c + "px");
  jQuery(leftslides[slide4]).css('top', d + "px");
  jQuery(leftslides[slide5]).css('top', e + "px");

  // repeat until slide is at zero position
  if (x < 0) window.setTimeout("animateSlide();", 1);
}
// create the slideshow when the page loads
jQuery(document).ready(makeSlideShow);

//全局变量
var numslides=0；
var numleftslides=0；
var currentslide=0，oldslide=4；
var slide1=0；
var-slide2=1；
var slide3=2；
var-slide4=3；
var slide5=4；
var x=0；
var a=0；
var b=240；
var c=480；
var d=720；
var e=960；
var picWidth=0；
var leftPicHeight=0；
var slides=newarray（）；
var leftslides=新数组（）；
函数makeSlideShow（）{
//隐藏导航栏选项
设置菜单（）；
//使用“幻灯片”类查找所有图像
imgs=document.getElementsByTagName（“img”）；
对于（i=0；i=numslides）currentslide=0；
//从右边开始
picWidth=parseInt（jQuery（幻灯片[currentslide]）.css（'width'）；
jQuery（slides[currentslide]）.css（'left'，-picWidth+“px”）；
x=-picWidth；
//将新幻灯片移到顶部
幻灯片[currentslide].style.zIndex=10；
如果（a<0）a=960；
如果（b<0）b=960；
如果（c<0）c=960；
如果（d<0）d=960；
如果（e<0）e=960；
animateSlide（）；
setTimeout（“nextSlide（）；”，5000）；
}
函数animateSlide（）{
//越低移动越慢，越高移动越快
x=数学最小值（0，x+7）；
a=数学最大值（-240，a-2）；
b=数学最大值（-240，b-2）；
c=数学最大值（-240，c-2）；
d=数学最大值（-240，d-2）；
e=数学最大值（-240，e-2）；
//上一幅图像移离左边缘
//（注释下一行以获得不同效果）
jQuery（slides[oldside]）.css（'left'，（x+picWidth）+“px”）；
jQuery（幻灯片[currentslide]）.css（'left'，x+“px”）；
jQuery（leftslides[slide1]）.css（'top'，a+“px”）；
jQuery（leftslides[slide2]）.css（'top'，b+“px”）；
jQuery（leftslides[slide3]）.css（'top'，c+“px”）；
jQuery（leftslides[slide4]）.css（'top'，d+“px”）；
jQuery（leftslides[slide5]）.css（'top'，e+“px”）；
//重复此操作，直到滑块处于零位置
if（x<0）window.setTimeout（“animateSlide（）；”，1）；
}
//在页面加载时创建幻灯片
jQuery（document）.ready（makeSlideShow）；

---

幻灯片实际上（有点）很有效。在firefox和chrome中，当浏览器启动时，它似乎工作正常。然而，当我将其最小化，然后再次将其恢复时，图片仍然会有动画，但它们会错位。在InternetExplorer中，简单的图像移动速度不够快，而且计时也不正确。任何帮助都将不胜感激。我将参加一个网络竞赛，明天下午我将演示这个网站。提前谢谢。

不是答案，但这太长了，无法发表评论：
有些事情你可以优化。例如，不需要按标签名获取所有图像， 然后使用

for

-循环检查每个图像是否有类名

幻灯片

然后将其添加到数组中。由于您已经在使用jQuery，所以只需获取所有 使用幻灯片图像

var slides = jQuery.makeArray($(".slide"));

我刚刚将您的标记添加到了（没有脚本），并添加了一些虚拟图像和控制台日志消息，因此很容易检查此数组包含的内容

---

参考资料：

经过多次努力，我相信我知道问题所在，并找到了解决方法。我认为可能发生的事情是，打开和关闭页面焦点的改变对幻灯片放映造成了足够的干扰，以至于图像定位的计算无法跟上显示。当你这样做的时候，几乎就像你进入了“比赛状态”。因此，我通过使用带有

window.onfocus（…）

事件的适当函数触发器来重置所有内容。这允许在用户离开页面并返回时重置所有内容，例如最小化和恢复页面时。由于IE加载图像的速度不够快，我放置了一个

if语句

，查看浏览器是否为IE，然后以不同的方式处理。这似乎是一个很好的补丁。不幸的是，现在我意识到真正的大屏幕扭曲了网站，干扰了一些功能。我想我现在只能接受这一点，但如果有人对此有任何建议，我会洗耳恭听