使用JavaScript, CSS和HTML制作一个简单的照片幻灯片

当我运行它时，出现了第一张图像，一秒钟后我所能看到的是一个白色的空白屏幕。什么也不会发生。我猜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>

试试这个。

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

下面这行没有按照您的期望运行:

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"。(为什么?参见javascript中逗号操作符的工作原理。)

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

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

相关内容

最新更新

热门标签：