Дерганное слайдшоу

@Rameron · Регистрация: 07.02.2011

Студворк — интернет-сервис помощи студентам

Имеется несколько картинок, которые на странице проигрываются как слайдшоу. Переход от одной картинки к следующей происходит плавно, с убыванием прозрачности одной и прибавления его же в другой. НО.
Когда происходит переход к следующей картинке, содержимое контейнера img2 переходит в img1, а в img2 грузится следующая картинка. И вот когда она загрузилась, она на миг отображается и только потом её опасити меняется на 0.

Да и скорость неравномерная почему-то...

Такие вот проблемы.

Вот код:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<HTML>
<HEAD>
<TITLE>SlideShow</TITLE>
</HEAD>
<BODY>
 
<img src="" id = "imgRotatorF" width="1280" height="347" style="opacity:1;position:absolute;top:0;">
<img src="" id = "imgRotatorS" width="1280" height="347" style="opacity:0;position:absolute;top:0;">
<!--position:absolute;top:0;-->
 
<SCRIPT type="text/javascript">
    strImgs = new Array ( 
    "0.png",
    "1.png",
    "2.png",
    "3.png", 
    "4.png",
    "5.png",
    "6.png",
    "7.png",
    "8.png",
    "9.png"
    );                                              //Массив с картинками, разделяются запятыми
    
    var strImageID1 = "imgRotatorF";                //ID первой картинки для смены
    var strImageID2 = "imgRotatorS";                //ID второй картинки для смены
    
    var startDelay = 3000;                          //Начальная задержка
    var showTime = 4000;                            //Время отображения одной картинки
    var changeTime = 10;                            //Скорость смены прозрачности
    var opacityStep = 0.01;                         //Шаг изменения прозрачности (косвенно связан с предыдущим)
    
    
    var nCur = 0;
    var curOp = 1;
    var nextOp = 0;
    var img1 = document.getElementById(strImageID1);
    var img2 = document.getElementById(strImageID2);
 
    var imgArray = new Array(strImgs.length);
    
    preloadImages();
    init();
 
function init()
{
    img1.src = imgArray[nCur];  
    img2.src = imgArray[nCur + 1];
    
    setTimeout("slideShow()",startDelay);
}   
 
function preloadImages()
{
    var i;
    for (i = 0; i < strImgs.length; i++)
    {
        imgArray[i] = new Image();
        imgArray[i] = strImgs[i];
    }
}
    
    
function slideShow()
{   
    img1.src = imgArray[nCur];
    img2.src = imgArray[(nCur + 1==strImgs.length?0:nCur + 1)];
 
    setElementOpacity(strImageID1, 1);
    setElementOpacity(strImageID2, 0);
    
    setSmoothOpacity(strImageID1, strImageID2);
    curOp = 1;
    nextOp = 0;
        
    nCur++;
    if (nCur == strImgs.length) nCur = 0;
 
    setTimeout("slideShow()",showTime + changeTime*opacityStep*100);
}   
 
function setSmoothOpacity(sFirImageID, sSecImageID)
{
    setElementOpacity(sFirImageID, curOp);
    curOp -= opacityStep;
 
    setElementOpacity(sSecImageID, nextOp);
    nextOp += opacityStep;
    
    if (curOp == 0) return;
    
    setTimeout("setSmoothOpacity("+ '\"' + sFirImageID + '\"' + ", " + '\"' + sSecImageID  + '\"' + ")",changeTime);
    
}
function setElementOpacity(sElemId, nOpacity)
{
  var opacityProp = getOpacityProperty();
  var elem = document.getElementById(sElemId);
 
  if (!elem || !opacityProp) return; // Если не существует элемент с указанным id или браузер не поддерживает ни один из известных функции способов управления прозрачностью
  
  if (opacityProp=="filter")  // Internet Exploder 5.5+
  {
    nOpacity *= 100;
    
    // Если уже установлена прозрачность, то меняем её через коллекцию filters, иначе добавляем прозрачность через style.filter
    var oAlpha = elem.filters['DXImageTransform.Microsoft.alpha'] || elem.filters.alpha;
    if (oAlpha) oAlpha.opacity = nOpacity;
    else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")"; // Для того чтобы не затереть другие фильтры используем "+="
  }
  else // Другие браузеры
    elem.style[opacityProp] = nOpacity;
}
function getOpacityProperty()
{
  if (typeof document.body.style.opacity == 'string') // CSS3 compliant (Moz 1.7+, Safari 1.2+, Opera 9)
    return 'opacity';
  else if (typeof document.body.style.MozOpacity == 'string') // Mozilla 1.6 и младше, Firefox 0.8 
    return 'MozOpacity';
  else if (typeof document.body.style.KhtmlOpacity == 'string') // Konqueror 3.1, Safari 1.1
    return 'KhtmlOpacity';
  else if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)[1]>=5.5) // Internet Exploder 5.5+
    return 'filter';
 
  return false; //нет прозрачности
}
</SCRIPT>
</BODY>
</HTML>

@Notortep · 03.10.2012, 07:40

а подревнее скрипта найти не смогли?

Internet Explodrer 5.5+, который здесь проверяется, выпущен в прошлом веке, в июле 2000 года - 12 лет назад
полагаю, на планете осталось не более десяти-пятнадцати человек, у которых этот браузер "по приколу" стоит на компьютере
-----

тайм-ауты "убивать" надо, а они здесь "плодятся" в неимоверном количестве и не "убиваются"
отсюда и неравномерность скорости, и дёрганья всякие
кроме того, картинки не "предзагружены" в кеш браузера, при первом "проходе" дёрганья неизбежны
-----

в общем, держите код, всего из одной функции, но ещё и с "предзагрузкой"
тега <img> вполне достаточно одного, да и абсолютно позиционировать ничего не нужно

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script>
function mFunc ()
{
var showTime = 4000, opTime = 30, obj = document.getElementById ('mPic'), w = obj.lang,
pics = ['http://img11.nnm.ru/7/2/8/c/f/078c81643af689f711a11f8b780.jpg',
        'http://uvarvar.narod.ru/img_7060.jpg',
        'http://super-naruto.3dn.ru/_fr/3/1580767.jpg',
        'http://img197.imageshack.us/img197/2352/bosque05.jpg',
        'http://desktop.alloflyrics.com/i/nature/70.jpg',
        'http://files.myopera.com/trash89/albums/300557/friends_1280_1024.jpg'];
// в массиве pics могут быть как абсолютные, так и относительные адреса картинок
if (!self.TMR) for (var j = 0, m = [], lj = pics.length; j < lj; j++)
m [j] = new Image (), m [j].src = pics [j]; else clearTimeout (TMR); if (w == 0)
   {
   for (var j = 0, lj = pics.length; j < lj; j++) 
   if (obj.src.indexOf (pics [j]) != -1) break;
   if (++j >= lj) j = 0; obj.src = pics [j], obj.lang = 1; return;
   }
if (w == 100) {obj.lang *= -1, TMR = setTimeout (mFunc, showTime); return}
var k = w > 0 ? 1 : -1, b = ('v' == '\v');
obj.style [b ? 'filter' : 'opacity'] = b ? 'alpha(opacity=' + k * ++obj.lang + ')'
: ++obj.lang * k * .01; TMR = setTimeout (mFunc, opTime);
}
</script>
 
<img id="mPic" src="http://uvarvar.narod.ru/img_7060.jpg" onload="mFunc ()" lang="-100">
<!-- в SRC тега может быть адрес, как имеющийся в массиве pics, так и не имеющийся -->

разумеется, габариты тега <img> указывать тоже надо - в теге, или через блок стилей
у меня (для картинок, взятых из Яндекса) это - style="width: 800px; height: 600px"

@Rameron · 03.10.2012, 11:42 **[ТС]**

О боже... Не могли бы объяснить, где в вашем в коде предзагрузка и почему моя функция preloadImages() в начале не выполняет эту функцию? =)

И нужно ли выполнять clearTimeout() для таймера в slideShow(), так как он постоянно активен. Или setTimeout() создает каждый раз новый таймер?

Кроме того, в случае вашего скрипта действительно не нужны несколько <img>, у меня же идет "смешивание картинок" то есть одновременно меняется прозрачность обоих картинок, одной в плюс, другой в минус, и они "перетекают" друг в друга. Одним <img>, как я понимаю, тут не обойтись.

Добавлено через 12 минут
А для чего параметр lang?

@Notortep · 03.10.2012, 19:02

Сообщение от Rameron

Не могли бы объяснить, где в вашем в коде предзагрузка и почему моя функция preloadImages() в начале не выполняет эту функцию?

объясняю:
-- в моём коде предзагрузка выполняется в строках ##12 и 13 моего кода:
for (var j = 0, m = [], lj = pics.length; j < lj; j++) m [j] = new Image (), m [j].src = pics [j]; и исполняется сразу после загрузки стартовой картинки в тег <img>, когда ещё не включён самый первый таймер if (!self.TMR)

-- ваша функция preloadImages () вызывается вами в глобальном контексте в строке #42 вашего кода и вызывается она ещё ДО её определения (которое находится в строках ##53-61 вашего кода)

в момент исполнения строки #42 ваша функция preloadImages () является is not defined
иными словами, вы зовёте покурить и выпить пива Васю Пупкина, который ещё не родился

Сообщение от Rameron

Или setTimeout() создает каждый раз новый таймер?

а вы думаете как-то иначе?
да, всякий раз создаётся новый таймер со своим уникальным идентификатором
с учётом вашего значения var changeTime = 10; - сто штук в секунду, шесть тысяч штук в минуту... и это не считая ваших стартового и "показушного" таймеров
и все они "живут" вплоть до закрытия страницы

Сообщение от Rameron

у меня же идет "смешивание картинок" то есть одновременно меняется прозрачность обоих картинок, одной в плюс, другой в минус, и они "перетекают" друг в друга

"перетекание" одной картинки в другую за период 1 секунда - это не "перетекание"... это "какафония цвета" какая-то

Сообщение от Rameron

А для чего параметр lang?

не "параметр", а "атрибут/свойство"
атрибут/свойство тега <IMG>
и не только этого тега - поддерживается практически всеми тегами, см. http://www.w3.org/TR/1999/REC-... #adef-lang

главная отличительная особенность этого атрибута/свойства заключается в том, что он никогда и никем по своему прямому назначению не используется
что ж добру без дела пропадать?
вот и использую я этот атрибут/свойство в качестве места для хранения как текущего значения прозрачности, так и "направления изменения" (знак минус показывает, что значение прозрачности надо уменьшать; знак плюс показывает, что значение прозрачности надо увеличивать; достижение значения == 100 показывает, что надо изменять знак; достижение значения == 0 показывает, что надо грузить следующую картинку)

вы в своём коде для этого используете аж три глобальных переменных nCur, curOp, nextOp
мой способ, как мне кажется, минимум в три раза эффективнее вашего

@Rameron · 03.10.2012, 21:53 **[ТС]**

Эмм... то есть порядок при написания функций и её вызова имеет значение? Пишу на Java и С#, там такого бреда нету, даже подумать не мог, что в JS такое еще осталось (как вы, наверное, поняли, я только начал изучать JS)

Сообщение от Notortep

..."перетекание" одной картинки в другую за период 1 секунда - это не "перетекание"... это "какафония цвета" какая-то

...

Заказчик этого требует, что я могу поделать

Так стоп... В 69 и 70 строках своего кода я вызываю функцию, которая объявлена только в 95 строке. И всё вызывается и работает, то есть уже is not defined исключен. Я чего-то недопонимаю...

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@Rameron Си-решеточник 141 / 135 / 60 Регистрация: 07.02.2011 Сообщений: 669
	03.10.2012, 11:42 [ТС]
	О боже... Не могли бы объяснить, где в вашем в коде предзагрузка и почему моя функция preloadImages() в начале не выполняет эту функцию? =) И нужно ли выполнять clearTimeout() для таймера в slideShow(), так как он постоянно активен. Или setTimeout() создает каждый раз новый таймер? Кроме того, в случае вашего скрипта действительно не нужны несколько <img>, у меня же идет "смешивание картинок" то есть одновременно меняется прозрачность обоих картинок, одной в плюс, другой в минус, и они "перетекают" друг в друга. Одним <img>, как я понимаю, тут не обойтись. Добавлено через 12 минут А для чего параметр lang? 0