javascript幻灯片不会更改图像

时间:2016-10-02 17:11:21

标签: javascript

我正在为我的网站制作标题,我想让它像幻灯片一样。 问题是图像不会改变。它仅显示1张图像,其余图像不会显示。 代码:



//Array with the paths to the images
var image = new Array("img/header/header1.png", "img/header/header2.png", "img/header/header3.png");

//imageNumber to change the image, and imageLenght for the array lenght - 1 
var imageNumber = 0;
var imageLength = image.length -1;

//Call changeImage()
changeImage();

//Function to change the image
function changeImage() {

	//use strict because I use dreamweaver and it needs that(I don't know why)
	"use strict";
	//Add 1 to imageNumber for choosing a image(in "document.slideshow.src = image[imageNumber];")	
	imageNumber++;

	//Check if image number is not below 0 or above the array index
	if(imageNumber < 0) {

		imageNumber = imageLength;

	} else if(imageNumber > imageLength) {

		imageNumber = 0;

	}

	//Change the image
	document.header.src = image[imageNumber];
	
	//recalling every second
	setTimeout(changeImage, 1000);

}
&#13;
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tommie's HOME</title>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script type="text/javascript" src="js/header_slideshow.js"></script>
</head>
<body>
<div id="big_wrapper">
<nav>
<ul id="n1">
<li><a href="#"><img src="img/logo.png" width="100px"/></a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul id="n2">
<li><a href="#">About</a></li>
<li><a href="#">Shop</a></li>
</ul>
</nav>
<div id="content">
<header>
<img src="img/header/header1.png" name="header" />
</header>
</div>
</div>
</body>
</html>
&#13;
&#13;
&#13;

如果您知道问题,请随时回复。

亲切的问候,

汤姆

0 个答案:

没有答案