每隔幾秒就在HTML頁面中更改圖像
[英]Change image in HTML page every few seconds
問題描述
我想每隔幾秒更換一次圖像，這是我的代碼：
<?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>
我的問題是它停留在第一張照片上！
我也想嘗試使用上一個和下一個按鈕翻閱圖片，但我不知道該怎么做。
6 個解決方案
解決方案1
25 已采納 2012-12-20 16:05:32
正如我在評論中發布的那樣，你不需要同時使用setTimeout()和setInterval() ，而且你也有一個語法錯誤（一個額外的} ）。 像這樣糾正你的代碼：
（編輯添加兩個函數以強制顯示下一個/上一個圖像）
<!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
以下將每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
更改setTimeout("changeImage()", 30000); to setInterval("changeImage()", 30000); 並刪除var timerid = setInterval(changeImage, 30000); 。
解決方案4
2 2012-12-20 16:21:02
截至當前編輯的帖子版本，您可以在每個更改結束時調用setInterval ， 為每個新的iterration添加一個新的“更改器” 。 這意味着在第一次運行之后，其中一個在內存中打勾，在100次運行后，100個不同的更換器每秒更換圖像100次，完全破壞性能並產生令人困惑的結果。
你只需要“灌注”一次setInterval 。 將其從函數中刪除並將其置於onload而不是直接函數調用。
解決方案5
1 2014-03-25 20:18:24
您可以在開頭加載圖像並更改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
使用javascript與左側垂直可點擊縮略圖交換圖像的最佳方式
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;
}
}
}
}
如何在javascript和html中每5秒更改一次文本和圖像
[英]how to change a text and image every 5 seconds in javascript and html
嘗試為 html 創建一個 js 類（每隔幾秒更改一次背景圖像），需要幫助
[英]Trying to make a js class for html (Changing background image every few seconds), need a helping hand
如何每隔幾秒鍾在innerHTML標簽中添加一個新圖像，而又不破壞“ <br> ” JavaScript，HTML5
[英]How to add a new Image every few seconds in a innerHTML tag without breaking “<br>” JavaScript, HTML5
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.