Question

当我运行它时，第一张图像出现，一秒钟之后，我只能看到一个白色的空白屏幕。什么都没发生。我猜JavaScript代码存在问题。这是我试过的代码..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
img {
    width: 582px;
    height: 306px;

}

</style>
</head>

<body>

<img src="image-slider-1.jpg" id="myphoto" />

<script type="text/javascript">

var image=document.getElementById("myphoto");
var imageArray=("image-slider-1.jpg","image-slider-2.jpg","image-slider-3.jpg","image-slider-4.jpg","image-slider-5.jpg");

var imageIndex=0;

function slide(){

image.setAttribute("src",imageArray [imageIndex] );
imageIndex++;
if(imageIndex>=imageArray.length) {
    imageIndex=0;

}
}
setInterval(slide,1000);

</script>
</body>
</html>

非常感谢任何帮助。

Answer 1

试试这个。它对我有用。

var speed = 3700;  //interval

var Pic = new Array();


Pic[0] = 'abc.jpg';

Pic[1] = 'def.jpg';

Pic[2] = 'ghi.jpg';
//add as many as you want

var t; //interval

var j = 0; 

var p = Pic.length;

var preLoad = new Array()

for (i = 0; i < p; i++)
     {

       preLoad[i] = new Image();

       preLoad[i].src = Pic[i];

 }

 // call this from your html as shown below 
  //<body onload="runBGSlideShow()">
 function runBGSlideShow(){

  if (document.body)
      {

         document.body.background = Pic[j];

         j = j + 1;

        if (j > (p-1))
           {
              j=0; //start from pic1 again
        }

        t = setTimeout('runBGSlideShow()', speed); 
}

}

Answer 2

以下行没有达到预期效果：

var imageArray=("image-slider-1.jpg","image-slider-2.jpg","image-slider-3.jpg","image-slider-4.jpg","image-slider-5.jpg");

如果您在此次调用后检查imageArray的值，则会找到一个包含“image-slider-5.jpg”的字符串。 （为什么？查看the comma operator in javascript的工作方式。）

要正确声明字符串数组，请使用[]表示法：

var imageArray=["image-slider-1.jpg","image-slider-2.jpg","image-slider-3.jpg","image-slider-4.jpg","image-slider-5.jpg"];

使用JavaScript，CSS和HTML制作简单的照片幻灯片

2 个答案: