我正在制作一个JS脚本，它将放在标题div中并显示几张图片。我查看了JQuery Cycle，但它不属于我的联盟。下面我写的代码冻结了浏览器，我应该使用带有timer var的for循环吗？
<script type="text/JavaScript" language="JavaScript">
var timer;
for (timer = 0; timer < 11; timer++) {
if (timer = 0) {
document.write('<img src="images/one.png">');
}
if (timer = 5) {
document.write('<img src="images/two.png">');
}
if (timer = 10) {
document.write('<img src="images/three.png">');
}
}
</script>
谢谢！
答案 0 :(得分：4)
假设您想要一个脚本来旋转图像，而不是像代码那样将它们写入页面，您可以使用以下内容：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="target"></div>
<script>
var ary = ["images/one.png","images/two.png","images/three.png"];
var target = document.getElementById("target");
setInterval(function(){
target.innerHTML = "<img src=\""+ary[0]+"\" />";
ary.push(ary.shift());
},2000);
</script>
</body>
</html>
当然上面的代码没有jQuery给你的效果（比如淡入淡出），但它也不需要加载整个jQuery库来实现这么基本的东西。
答案 1 :(得分：2)
在页面加载后运行脚本怎么样？
<script>
// in <head> //
function load() {
var headDiv = document.getElementById("head");
var images = ["images/one.png", "images/two.png"];
for(var i = 0; i<images.length; i++) {
image = document.createElement("img");
image.src = images[i];
headDiv.appendChild(image);
}
}
</script>
然后使用<body onload="load();">运行脚本。
修改 为了添加延迟加载图像，我重写了代码：
<script>
// in <head> //
var displayOnLoad = true; // Set to true to load the first image when the script runs, otherwise set to false to delay before loading the first image
var delay = 2.5; // seconds to delay between loading images
function loadImage(url) {
image = document.createElement("img");
image.src = images[i];
headDiv.appendChild(image);
}
function load() {
var headDiv = document.getElementById("head");
var images = ["images/one.png", "images/two.png"];
for(var i = 0; i<images.length; i++) {
setTimeout(loadImage(images[i]), (i+displayOnLoad)*(delay*1000));
}
}
</script>
如果要在加载第一张图像之前等待指定的displayOnLoad = false;，请设置delay。 delay以秒为单位设置。我建议在图像之间等待一秒钟，因为它们可能需要一些时间才能下载（取决于用户的互联网速度）。
与第一个代码段一样，我没有测试代码，所以请告诉我是否发生错误，我会看看。
答案 2 :(得分：1)
由于您在问题中使用了jquery标记，我认为您可以使用jQuery。在这种情况下，您可以执行以下操作：
在静态HTML中，包含img标记并将其id设置为某些内容（在我的示例中，它设置为myImg）并将其src属性设置为第一个图像，例如：
<img id="myImg" src="images/one.png">
接下来，使用jQuery延迟脚本的执行，直到页面加载完毕，然后使用setTimeout创建进一步的延迟，以便用户在更改之前可以花几秒钟查看图像：
<script>
var imgTimeoutMsecs = 5000; // Five seconds between image cycles
$(function() {
// Document is ready
setTimeout(function() {
// We will get here after the first timer expires.
// Change the image src property of the existing img element.
$("#myImg").prop("src", "images/two.png");
setTimeout(function() {
// We will get here after the second, nested, timer expires.
// Again, change the image src property of the existing img element.
$("#myImg").prop("src", "images/three.png");
}, imgTimeoutMsecs);
}, imgTimeoutMsecs);
});
</script>
当然，这种方法并不能很好地扩展，所以如果你总共使用三个以上的图像，你想要修改这样的方法：
var imgTimeoutMsecs = 5000; // Five seconds between image cycles
// Array of img src attributes.
var images = [
"images/one.png",
"images/two.png",
"images/three.png",
"images/four.png",
"images/five.png",
];
// Index into images array.
var iCurrentImage = 0;
function cycleImage() {
// Increment to the next image, or wrap around.
if (iCurrentImage >= images.length) {
iCurrentImage = 0;
}
else {
iCurrentImage += 1;
}
$("#myImg").prop("src", images[iCurrentImage]);
// Reset the timer.
setTimeout(cycleImages, imgTimeoutMsecs);
}
$(function() {
// Document is ready.
// Cycle images for as long as the page is loaded.
setTimeout(cycleImages, imgTimeoutMsecs);
});
可以对该示例进行许多改进。例如，您可以使用setInterval代替setTimer来略微简化此代码。