Question

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

<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];
    }
}

Answer 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);
}

Answer 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>

Javascript Pic幻灯片显示失败？

2 个答案: