Javascript Pic幻灯片失败？答案

【问题标题】：Javascript Pic Slideshow Failing?Javascript Pic幻灯片失败？
【发布时间】：2015-04-29 18:50:32
【问题描述】：

由于某种原因，我的代码没有正确执行。我正在尝试使用 javascript 编写幻灯片。我使用 for 循环从创建的数组中提取和填充 src 文件，并每 3 秒更改一次图片。页面加载并且第一张图片存在，但是当间隔发生时，第一张图片消失并且没有任何东西落在它的位置。我做错了什么？

<img name="mainSlide" id="mainSlide" src="images/mainPagePhotos/facebook-20131027-180258.png" alt="">

var mainSlidePics = ("facebook-20131027-180258.png","IMG_9694116683469.jpg","IMG_28452769990897.jpg");
window.onload = setInterval("mainSlide();", 3000);
function mainSlide() {
    for(i=0; i<mainSlidePics.length; i++ ) {
        document.images.mainSlide.src = "images/mainPagePhotos/" + mainSlidePics[i];
    }
}

【问题讨论】：

标签： javascript slideshow setinterval

【解决方案1】：

您是否尝试过先获取 ID？

var mainSlide = document.getElementById("mainSlide");

mainSlide.src = "images/mainPagePhotos/" + mainSlidePics[i];

forloop 也是一个循环，即使在一次调用中也能完成其循环。试试

var i = 0;
window.onload = setInterval("mainSlide(i);", 3000);
mainSlide(int j){
      mainSlide.src = "images/mainPagePhotos/" + mainSlidePics[i];
      setInterval("mainSlide(j++);", 3000);
}

【讨论】：

【解决方案2】：

首先你必须正确声明数组。然后你必须将计数器变量移到由 setInterval 触发的函数之外。然后将函数的引用传递给 setInterval。

<img name="mainSlide" id="mainSlide" src="images/mainPagePhotos/facebook-20131027-180258.png" alt="">

<script type="text/javascript">
var mainSlidePics = ["facebook-20131027-180258.png","IMG_9694116683469.jpg","IMG_28452769990897.jpg"];
var position = 0;
function changePic() {
     position = (position+1) % mainSlidePics.length;
     document.images.mainSlide.src = "images/mainPagePhotos/" + mainSlidePics[position];

}
window.onload = function() {
  setInterval(changePic, 3000);
};
</script>

【讨论】：