騎自行車穿過圖像和文字

我想要讓頁面在4個不同的圖片之間循環，只顯示1以及上面的文字，每個圖像都會發生變化。我設法讓圖像循環，但不知道我怎麼做文本。這是我到目前爲止。騎自行車穿過圖像和文字

<!DOCTYPE html> 
<html> 
<head> 
<title> banner array thing </title> 

<script> 
var names = ["name1", "name2", "name3", "name4"]; 
var description = [4]; 
var imgArray = new Array(4); 
var index = 0; 

function cycle() 
{ 

document.banner.src = imgArray[index].src; 
index++ 
if (index > 3) 
{ 
index = 0; 
} 
setTimeout("cycle()", 2000) 
return; 
} 

function startup() 
{ 
imgArray[0] = new Image; 
imgArray[0].src = "img1.jpg"; 

imgArray[1] = new Image; 
imgArray[1].src = "img2.jpg"; 

imgArray[2] = new Image; 
imgArray[2].src = "img3.jpg"; 

imgArray[3] = new Image; 
imgArray[3].src = "img4.jpg"; 

cycle(); 
return; 
} 
</script> 

<link rel="stylesheet" type="text/css" href="main.css"> 
</head> 

<body onLoad="startup()"> 
<div align="center"> 
</br> </br> 

<!-- Where'd I'd like the changable text--> 

<img name="banner" src="img1.jpg"> 

</div> 
</body> 
</html>

就像我說的那樣，圖像循環工作，我只是想要一些文字隨圖像而改變。請提前幫助和感謝。希望我把所有的事都寫好，這樣你就可以理解了。

來源

2015-05-04 SKmuffin

'新陣列（4）'是Array.length === 1的值4'VAR imgArray = [];'。另外，當你傳遞一個函數給setTimeout時，只需使用它的名字就像一個var。 – PHPglue

多數民衆贊成在你的意志力過於陣列中的價值，創建一個separte數組爲您的文本 – saj

-1

<div id = "yourText"></div>

將這個在您的標記，然後：

function cycle() 
{ 

document.banner.src = imgArray[index].src; 
document.getElementById("yourText").innerHTML = names[index]; 
index++ 
if (index > 3) 
{ 
index = 0; 
} 
setTimeout("cycle()", 2000) 
return; 
}

來源

2015-05-04 23:41:34

謝謝。我唯一不確定的是我的標記。 – SKmuffin

你應該你的JavaScript從HTML代碼中分離，所以它可以存儲到緩存中。你想要什麼能像來完成：

<!DOCTYPE html> 
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'> 
    <head> 
    <meta http-equiv='content-type' content='text/html;charset=utf-8' /> 
    <style type='text/css'> 
     @import 'main.css'; 
    </style> 
    <script type='text/javascript' src='main.js'></script> 
    </head> 
<body> 
    <img id='banner' src='img1.jpg' /> 
</body> 
</html>

main.js

//<![CDATA[ 
var pre = onload; 
onload = function(){ 
if(pre)pre(); 
var doc = document, bod = doc.body; 
function E(e){ 
    return doc.getElementById(e); 
} 
function imgRot(where, startNum, finishNum, prefix, ext, interval){ 
    var n = startNum, x = ext.replace(/^\./, '')+'.'; 
    setInterval(function(){ 
    n++; where.src = prefix+n+x; 
    if(n === finishNum)n = startNum-1; 
    }, interval); 
} 
imgRot(E('banner'), 1, 4, 'img', 'jpg', 2000); 
} 
//]]>

來源

2015-05-05 00:10:50 PHPglue

騎自行車穿過圖像和文字

回答

相關問題