| |
|
|
| | Есть контейнер с 1 картинкой, которая по умолчанию подгружается в браузер.
В это же время в этот контейнер (через display: hidden или еще как-то, что бы 2-ю картинку не было видно) подгружается 2-я картинка.
Первая картинка через 5 секунд должна плавно смениться 2-й, которая в это время уже подгрузилась в браузер.
Дальше, подгружается 3-я картинка и 2-я плавно сменяется 3-й. И т.д.
Подскажите логику скрипта и реализацию плавного появления одной картинки из другой. | |
| |
|
|
| |
|
|
| |
для: lElectroHardl
(08.05.2011 в 16:28)
| | | 1) Использование jQuery допускается?
2) Как много изображений планируется менять?
Ниже приводится заготовка на jQuery (которая манипулирует тремя файлами 1.jpg, 2.jpg, 3.jpg высотой 100 на 140 пикселей), только в ней не реализован полный рекурсивный спуск, так как нужно заранее договориться, где мы будем хранить список изображений, так как функция обратного вызова в fadeTo() не принимает параметров.
<html>
<head>
<title>jQuery</title>
<style type="text/css">
#fst, #snd {
width: 140px;
height: 100px;
margin: 0px;
padding: 0px;
}
#fst {
position: relative;
top: -100px;
}
</style>
<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
// Устанавливаем второе изображение под первым
$("#snd").css("background", "url(2.jpg)");
// Растворяем первое изображение в течение 5 секунд
$("#fst").fadeTo(5000, 0, function(){
// Заменяем старое, растворенное изображение
// новым с 100% непрозрачностью
$("#fst").css("background", $("#snd").css("background"));
$("#fst").fadeTo(1, 1);
// Начало рекурсии
// Устанавливаем второе изображение
$("#snd").css("background", "url(3.jpg)");
// Растворяем первое изображение в течение 5 секунд
$("#fst").fadeTo(5000, 0, function(){
// Заменяем старое, растворенное изображение
// новым с 100% непрозрачностью
$("#fst").css("background", $("#snd").css("background"));
$("#fst").fadeTo(1, 1);
});
});
});
</script>
</head>
<body>
<p id="snd" >
<p id="fst" style='background: url(1.jpg);'>
</p>
</p>
</body>
</html>
|
| |
| |
|
|
