Форум

IgorArhangel · #1 (**permalink**) 12.03.2013, 13:06

Добрый день..
Стала проблема передо мной. Нужно чтоб при перезегрузке страницы менялся фон (это я сделал) и есть еще один текстовый блок который должен соответствовать определенному фону.
Вот что я сделал

<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<style>
#wp{
height:1500px;
width:700px;
}
#wp div{
	position:absolute;
	top:200px;
}
</style>
<script type="text/javascript">
document.write('<style> #wp {background-image: url(img/'+Math.round(Math.random()*4)+'.jpg);}</style>')
</script>
<body>
	<div id="wp">
		<div>
			<p>Текст 1</p>
			<p>Текст 1</p>
		</div>
		<div>
			<p>Текст 2</p>
			<p>Текст 2</p>
		</div>
		<div>
			<p>Текст 3</p>
			<p>Текст 3</p>
		</div>
		<div>
			<p>Текст 4</p>
			<p>Текст 4</p>
		</div>
	</div>
</body>

Есть картинки 1, 2, 3, 4 они должны соответствовать определенному блоку с текстом. То есть картинка 1 - текст 1 и т.д.
Подскажите куда двигаться. Может в одну переменную загнать и фон и блок див?

IgorArhangel · #2 (**permalink**) 12.03.2013, 16:08

Я это сделал. Очень примитивным способом)

<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<style>
#wp{
height:1500px;
width:700px;
}
#wp div{
	position:absolute;
	top:200px;
}
.text1, .text2, .text3, .text4{
visibility:hidden;
}
</style>
<script type="text/javascript">
var a=Math.floor(Math.random()*4)+1;
document.write('<style> #wp {background-image: url(img/'+a+'.jpg);} .text'+a+'{visibility:visible;}</style>');
</script>
<body>
	<div id="wp">
		<div class="text1">
			<p>Текст 1</p>
			<p>Текст 1</p>
		</div>
		<div class="text2">
			<p>Текст 2</p>
			<p>Текст 2</p>
		</div>
		<div class="text3">
			<p>Текст 3</p>
			<p>Текст 3</p>
		</div>
		<div class="text4">
			<p>Текст 4</p>
			<p>Текст 4</p>
		</div>
	</div>
</body>

Еще вопросик как можно сделать плавную смену этих блоков. Что мохно прописать переменной а, чтоб переменная меняла значение через 10 секунд?

Hoshinokoe · #3 (**permalink**) 12.03.2013, 16:10

IgorArhangel,

Почитайте про animate.
Позволяет сделать различные эффекты: затухание, появление и т.д.

Цитата:

Что мохно прописать переменной а, чтоб переменная меняла значение через 10 секунд?

Почитайте про setTimeout и setInterval

Форум

Справочник

Discord чат

Курсы javascript