Прогулка по изображению и тексту

Я стараюсь, чтобы страница проходила через 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

'новый Array (4)' является Array.length === 1 со значением 4. 'вар imgArray = []; '. Кроме того, когда вы передаете функцию setTimeout, просто используйте ее имя, например, var. – PHPglue

thats cus ваш перезаписывающий значение в массиве, создайте массив 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

Прогулка по изображению и тексту

ответ

Смежные вопросы