VPF::плавный переход - Форум программистов

name

Дата 14.7.2010, 01:09 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 95
Регистрация: 12.1.2005

Репутация: нет
Всего: нет

Здравствуйте.
Есть код смены автоматической смены картинок.

Код


<script type="text/javascript">
var image1=new Image()
image1.src="1.png"
var image2=new Image()
image2.src="2.png"
var image3=new Image()
image3.src="3.png"
</script>

<img name="slide">

<script>
<!--
var step=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
setTimeout("slideit()",4000)
}
slideit()
//--> 
</script>

Хочу добавить плавный переход, через прозрачность.
Искал в интернете, нахожу или только под ИЕ, или с прозрачностью, но без автоматической перемотки, или оч сложный крутой скрипт, что разобраться вообще не могу.

Простите за такой вопрос.
Заранее спасибо.

EmilRegis

Дата 14.7.2010, 06:18 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 306
Регистрация: 21.9.2007

Репутация: 3
Всего: 4

есть готовое решение на jquery
http://www.webnotes.com.ua/index.php/archives/70

можно и обычным скриптом...тогда внутри функции slideit вызывайте функцию например opacityChange
что-то типа такого

Код


function opacityChange(opacity){
  var newOpacity = opacity - 0.25;
  if (newOpacity<=0 ) return;
  document.images.slide.style.opacity = newOpacity ;
  setTimeout("opacityChange(newOpacity)",1000)
}

ну это естественно набросок, его заточить под кроссбраузерность, навести красоту и скорее всего будет работать

name

Дата 14.7.2010, 14:36 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 95
Регистрация: 12.1.2005

Репутация: нет
Всего: нет

а в каком именно месте вызывать и с каким параметром?

domla

Дата 15.7.2010, 00:25 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 11
Регистрация: 19.12.2009

Репутация: 1
Всего: 1

Не знаю прав ли я, но мне кажется имеется ввиду, "таяние" одной картинки до другой

Код


var images = ['1.jpg', '2.jpg', '3.jpg'], //массив картинок
i = -1,    //начальный индекс
imgs = $('#container img'); //две картинки, вторая висит абсолютом над первой

window.setInterval(function() {
    i++; //инкремент индекса картинки
    if (i == images.length) i = 0; //если превышает максимальный, то идем к началу
    imgs.eq(0).attr('src', images[i]); //устанавливаем src нижней картинки
    imgs.eq(1).fadeOut(500, function() { //меняем прозрачность висящей над ней
        $(this).attr('src', images[i]).show(); //меняем src второй картинки, и делаем ее видимой, т.о. подготавливая к следующей итерации
    });
}, 3000);

Код набросал по памяти (писал, месяц-два назад), надо тестить, но идея, вроде, понятна...

Это сообщение отредактировал(а) domla - 15.7.2010, 00:28

name

Дата 15.7.2010, 00:55 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 95
Регистрация: 12.1.2005

Репутация: нет
Всего: нет

спасибо большое. Проблема решена

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »