每隔几秒就在HTML页面中更改图像
[英]Change image in HTML page every few seconds
问题描述
I want to change images every few seconds, this is my code: 
我想每隔几秒更换一次图像，这是我的代码：
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>change picture</title>
<script type = "text/javascript">
function changeImage()
{
var img = document.getElementById("img");
img.src = images[x];
x++;
if(x >= images.length){
x = 0;
}
var timerid = setInterval(changeImage(), 1000);
} }
var images = [], x = 0;
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";
</script>
</head>
<body onload = "changeImage()">
<img id="img" src="startpicture.jpg">
</body>
</html>
My problem is its stuck on the first picture! 我的问题是它停留在第一张照片上！
I also wanted to try flipping through the pictures with previous and next buttons but I have no idea how to do that. 我也想尝试使用上一个和下一个按钮翻阅图片，但我不知道该怎么做。
6 个解决方案
解决方案1
25 已采纳 2012-12-20 16:05:32
As I posted in the comment you don't need to use both setTimeout() and setInterval() , moreover you have a syntax error too (the one extra } ). 正如我在评论中发布的那样，你不需要同时使用setTimeout()和setInterval() ，而且你也有一个语法错误（一个额外的} ）。 Correct your code like this: 像这样纠正你的代码：
(edited to add two functions to force the next/previous image to be shown) （编辑添加两个函数以强制显示下一个/上一个图像）
<!DOCTYPE html>
<html>
<head>
<title>change picture</title>
<script type = "text/javascript">
function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("img").src = images[x];
}
function displayPreviousImage() {
x = (x <= 0) ? images.length - 1 : x - 1;
document.getElementById("img").src = images[x];
}
function startTimer() {
setInterval(displayNextImage, 3000);
}
var images = [], x = -1;
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";
</script>
</head>
<body onload = "startTimer()">
<img id="img" src="startpicture.jpg"/>
<button type="button" onclick="displayPreviousImage()">Previous</button>
<button type="button" onclick="displayNextImage()">Next</button>
</body>
</html>
解决方案2
5 2013-05-09 13:15:40
below will change link and banner every 10 seconds 以下将每10秒更改一次链接和横幅
<script>
var links = ["http://www.abc.com","http://www.def.com","http://www.ghi.com"];
var images = ["http://www.abc.com/1.gif","http://www.def.com/2.gif","http://www.ghi.com/3gif"];
var i = 0;
var renew = setInterval(function(){
if(links.length == i){
i = 0;
}
else {
document.getElementById("bannerImage").src = images[i];
document.getElementById("bannerLink").href = links[i];
i++;
}
},10000);
</script>
<a id="bannerLink" href="http://www.abc.com" onclick="void window.open(this.href); return false;">
<img id="bannerImage" src="http://www.abc.com/1.gif" width="694" height="83" alt="some text">
</a>
解决方案3
2 2012-12-20 16:01:42
Change setTimeout("changeImage()", 30000); 更改setTimeout("changeImage()", 30000); to setInterval("changeImage()", 30000); to setInterval("changeImage()", 30000); and remove var timerid = setInterval(changeImage, 30000); 并删除var timerid = setInterval(changeImage, 30000); . 。
解决方案4
2 2012-12-20 16:21:02
As of current edited version of the post, you call setInterval at each change's end, adding a new "changer" with each new iterration . 截至当前编辑的帖子版本，您可以在每个更改结束时调用setInterval ， 为每个新的iterration添加一个新的“更改器” 。 That means after first run, there's one of them ticking in memory, after 100 runs, 100 different changers change image 100 times every second, completely destroying performance and producing confusing results. 这意味着在第一次运行之后，其中一个在内存中打勾，在100次运行后，100个不同的更换器每秒更换图像100次，完全破坏性能并产生令人困惑的结果。
You only need to "prime" setInterval once. 你只需要“灌注”一次setInterval 。 Remove it from function and place it inside onload instead of direct function call. 将其从函数中删除并将其置于onload而不是直接函数调用。
解决方案5
1 2014-03-25 20:18:24
You can load the images at the beginning and change the css attributes to show every image. 您可以在开头加载图像并更改css属性以显示每个图像。
var images = array();
for( url in your_urls_array ){
var img = document.createElement( "img" );
//here the image attributes ( width, height, position, etc )
images.push( img );
}
function player( position )
{
images[position-1].style.display = "none" //be careful working with the first position
images[position].style.display = "block";
//reset position if needed
timer = setTimeOut( "player( position )", time );
}
解决方案6
0 2014-05-09 19:21:43
Best way to swap images with javascript with left vertical clickable thumbnails 使用javascript与左侧垂直可点击缩略图交换图像的最佳方式
SCRIPT FILE: function swapImages() { SCRIPT文件：function swapImages（）{
window.onload = function () {
var img = document.getElementById("img_wrap");
var imgall = img.getElementsByTagName("img");
var firstimg = imgall[0]; //first image
for (var a = 0; a <= imgall.length; a++) {
setInterval(function () {
var rand = Math.floor(Math.random() * imgall.length);
firstimg.src = imgall[rand].src;
}, 3000);
imgall[1].onmouseover = function () {
//alert("what");
clearInterval();
firstimg.src = imgall[1].src;
}
imgall[2].onmouseover = function () {
clearInterval();
firstimg.src = imgall[2].src;
}
imgall[3].onmouseover = function () {
clearInterval();
firstimg.src = imgall[3].src;
}
imgall[4].onmouseover = function () {
clearInterval();
firstimg.src = imgall[4].src;
}
imgall[5].onmouseover = function () {
clearInterval();
firstimg.src = imgall[5].src;
}
}
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.