我正在制作一个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
来略微简化此代码。