powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / JScript меняющиеся картинки
25 сообщений из 25, страница 1 из 1
JScript меняющиеся картинки
    #36110188
R4z0R
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Есть папка с 3 фотками, как разместить на странице динамическую фотку, которая бы показывала фотки из этой папки (можно жестко прописать их чтобы не париться со сканированием директории) поочередно с затуханием? Т.е есть текст с фоткой, на которой показалась одна фотка, погасла, появилась вторая, с затуханием исчезла, появилась третья и так по кругу. Где-то видел такой код на jscript, выглядел просто, но теперь не могу найти
...
Рейтинг: 0 / 0
JScript меняющиеся картинки
    #36110242
Фотография Ex_Soft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
тынць
_________________
"Helo, word!" - 17 errors 56 warnings
Posted via ActualForum NNTP Server 1.4
...
Рейтинг: 0 / 0
JScript меняющиеся картинки
    #36110551
R4z0R
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
нашел вот такой вариант - все супер, но почему-то в начале показа нет картинки, а потом все ок, идет показ с 1 по 3 картинки
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
<html>
<script>
var i= 1 ;
arrGif=["http://localhost/2/img/1.jpg",
"http://localhost/2/img/2.jpg",
"http://localhost/2/img/3.jpg",
];
window.onload=function(){
setInterval(fn, 3000 );
}
function fn(){
document.getElementById("im").src=arrGif[i];
i++;
if(i> 2 )i= 0 ;
}
</script>
<body>
<img id="im" src="" />
</body>
</html>
...
Рейтинг: 0 / 0
JScript меняющиеся картинки
    #36110581
Фотография Ex_Soft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
R4z0R
почему-то в начале показа нет картинки
Код: plaintext
1.
<img id="im" src="" />

_________________
"Helo, word!" - 17 errors 56 warnings
Posted via ActualForum NNTP Server 1.4
...
Рейтинг: 0 / 0
JScript меняющиеся картинки
    #36110614
R4z0R
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
блин, точно. Спасибо
...
Рейтинг: 0 / 0
JScript меняющиеся картинки
    #36111031
R4z0R
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Нашел с эффектом fade-in и fade-out:
Код: plaintext
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.
<html>
<head>
<title>Slider with fade-in and fade-out</title>

<script language=javaScript>

inter0 = new Image();
inter0.src = "./img/0.jpg";

inter1 = new Image();
inter1.src = "./img/1.jpg";

inter2 = new Image();
inter2.src = "./img/2.jpg";

inter3 = new Image();
inter3.src = "./img/3.jpg";

inter4 = new Image();
inter4.src = "./img/4.jpg";
var i_strngth= 1 
var i_image= 0 

var imageurl = new Array()
imageurl[ 0 ] ="./img/0.jpg"
imageurl[ 1 ] ="./img/1.jpg"
imageurl[ 2 ] ="./img/2.jpg"
imageurl[ 3 ] ="./img/3.jpg"
imageurl[ 4 ] ="./img/4.jpg"


function showimage() {		
	if(document.all) {
		if (i_strngth <= 110 ) {
			testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";
			i_strngth=i_strngth+ 10 
			var timer=setTimeout("showimage()", 10 )
		}	
		else {
			clearTimeout(timer)
			var timer=setTimeout("hideimage()", 3000 )
		}
	}	
	
	if(document.layers) {
			clearTimeout(timer)
			document.testimage.document.write("<img src="+imageurl[i_image]+" border=0>")
			document.close()
			i_image++
			if (i_image >= imageurl.length) {i_image= 0 }	
			var timer=setTimeout("showimage()", 10 )
				
	}	
}


function hideimage() {		
	if (i_strngth >=- 10 ) {
		testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";
		i_strngth=i_strngth- 10 
		var timer=setTimeout("hideimage()", 10 )
	}	
	else {
		clearTimeout(timer)
		i_image++
		if (i_image >= imageurl.length) {i_image= 0 }
		i_strngth= 1 
		var timer=setTimeout("showimage()", 5 )	
	}
}


// - End of JavaScript - -->
</script>
</head>
<body bgcolor="#ffffff" onLoad="showimage()">

<div id="testimage" class="picture"></div>


</body>
</html>
но такой вариант работает только в IE :(
...
Рейтинг: 0 / 0
JScript меняющиеся картинки
    #36111105
Фотография Ex_Soft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Не ленитесь
: тынць -> тынць (как вариант
)
_________________
"Helo, word!" - 17 errors 56 warnings
Posted via ActualForum NNTP Server 1.4
...
Рейтинг: 0 / 0
JScript меняющиеся картинки
    #36111120
Фотография Ex_Soft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
P.S. BTW,
R4z0R
работает только в IE
Код: plaintext
\n<img style=\'filter:alpha(opacity="+i_strngth+")\'\n

/me думает: не мудрено...
_________________
"Helo, word!" - 17 errors 56 warnings
Posted via ActualForum NNTP Server 1.4
...
Рейтинг: 0 / 0
JScript меняющиеся картинки
    #36111150
R4z0R
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Ex_Soft
Не ленитесь
: тынць -> тынць (как вариант
)
_________________
"Helo, word!" - 17 errors 56 warnings

не заметил что по второй ссылке правленый вариант. Я такой же код привел, только мой вариант корявый, а по второму тынцу работает во всех браузерах. Сенкс
...
Рейтинг: 0 / 0
JScript меняющиеся картинки
    #36111253
R4z0R
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
не пойму, где меняется время отображения самой фотки между переходами? Ткните носом плз:
Код: plaintext
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.
function showimage()
{
	var
		Ctrl;

	if(!(Ctrl=document.getElementById("testimage")))
		return;

	if(Ctrl.src!=imageurl[i_image])
		Ctrl.src=imageurl[i_image];

	if(i_strngth>= 0  && i_strngth<= 100 )
		setOpacity(Ctrl,i_strngth);

	i_strngth+= 10 ;
	if(!timer)
		timer=setInterval("showimage()", 100 );
	if(i_strngth> 100 )
	{
		clearInterval(timer);
		timer=setInterval("hideimage()", 100 );
	}
}

function hideimage()
{
	var
		Ctrl;

	if(!(Ctrl=document.getElementById("testimage")))
		return;

	if(i_strngth>= 0  && i_strngth<= 100 )
		setOpacity(Ctrl,i_strngth);
	i_strngth-= 10 ;
	if(!timer)
		timer=setInterval("hideimage()", 100 );
	if(i_strngth< 0 )
	{
		clearInterval(timer);
		if(++i_image> 2 )
			i_image= 0 ;
		if(Ctrl.src!=imageurl[i_image])
			Ctrl.src=imageurl[i_image];
		timer=setInterval("showimage()", 100 );
	}
}

function setOpacity(el, opacity)
{
	if(el.style.opacity!=opacity)
	{
		el.style.opacity=el.style.KhtmOpacity=el.style.MozOpacity=opacity/ 100 ;
		el.style.filter="alpha(opacity="+opacity+")";
	}
}
		</script>
...
Рейтинг: 0 / 0
JScript меняющиеся картинки
    #36111264
Фотография Ex_Soft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
R4z0R
время

тынць
_________________
"Helo, word!" - 17 errors 56 warnings
Posted via ActualForum NNTP Server 1.4
...
Рейтинг: 0 / 0
JScript меняющиеся картинки
    #36111360
R4z0R
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Ex_Soft
R4z0R
время

тынць
_________________
"Helo, word!" - 17 errors 56 warnings

да я понял что менять нужно
Код: plaintext
1.
2.
timer=setInterval("showimage()", 100 );
timer=setInterval("hideimage()", 100 );
но получается только: смена картинки->нужная пауза->и медленное затухание
...
Рейтинг: 0 / 0
JScript меняющиеся картинки
    #36112529
R4z0R
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
...
Рейтинг: 0 / 0
JScript меняющиеся картинки
    #36112551
Фотография Ex_Soft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Все, что необходимо чтобы добиться Вашей хотелки Вам уже, IMHO, приподнесли. Или включайте моск или сюда .
_________________
"Helo, word!" - 17 errors 56 warnings
Posted via ActualForum NNTP Server 1.4
...
Рейтинг: 0 / 0
JScript меняющиеся картинки
    #36112971
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Ладно уж:
Код: plaintext
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.
<html>
<script>
var currImg;
var int;
var opac;
function nextimg(im){
	if(int!=null) clearInterval(int);
	var div=document.getElementById("div");
	var i= 0 ;
	while(div.childNodes[i].nodeType!= 1 ) i++;
	i= 0 ;
	while(div.childNodes[i].nodeType!= 1 ) i++;
	currImg=div.childNodes[i];
	opac= 0 ;
	currImg.style.opacity=opac;
	currImg.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+opac* 100 +")";
	div.appendChild(currImg);
	int=setInterval(setOpac, 100 ); //здесь задаём интервал 100мс
}
function setOpac(){
	if(parseInt(opac)>= 1 ) {opac= 0 ; clearInterval(int); return;}
	opac+= 0 . 1 ; //здесь задаём приращение прозрачности
	currImg.style.opacity=opac;
	currImg.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+opac* 100 +")";
}
</script>
<body>
<div id="div" style="position:relative">
<img style="cursor:pointer; position:absolute;top:0px;left:0px;" onclick="nextimg(this);" src="http://img.lenta.ru/news/2009/07/27/year/picturesmall.jpg" />
<img style="cursor:pointer; position:absolute;top:0px;left:0px;" onclick="nextimg(this);" src="http://img.lenta.ru/news/2009/07/27/meet/picturesmall.jpg" />
<img style="cursor:pointer; position:absolute;top:0px;left:0px;" onclick="nextimg(this);" src="http://img.lenta.ru/news/2009/07/28/romanchuk/picturesmall.jpg" />
</div>
</body>
</html>
...
Рейтинг: 0 / 0
JScript меняющиеся картинки
    #36112979
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
ПС.
Собственно параметр в nextimg() не используется. На всякий случай написал.
...
Рейтинг: 0 / 0
JScript меняющиеся картинки
    #36113193
R4z0R
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
ShSergeПС.
Собственно параметр в nextimg() не используется. На всякий случай написал.
Спасибо за помощь, но пока был в поиске - не увидел ответ. То что как раз доктор прописал - нашел тут
...
Рейтинг: 0 / 0
JScript меняющиеся картинки
    #36169037
авторнашел вот такой вариант - все супер, но почему-то в начале показа нет картинки, а потом все ок, идет показ с 1 по 3 картинки
<html>
<script>
var i=1;
arrGif=["http://localhost/2/img/1.jpg",
"http://localhost/2/img/2.jpg",
"http://localhost/2/img/3.jpg",
];
window.onload=function(){
setInterval(fn,3000);
}
function fn(){
document.getElementById("im").src=arrGif[i];
i++;
if(i>2)i=0;
}
</script>
<body>
<img id="im" src="" />
</body>
</html>

Подскажите пожалуйста, как использовать этот скрипт в нескольких местах на одной странице? Например мне нужно, чтобы на одной странице менялись 4 изображения.
...
Рейтинг: 0 / 0
Период между сообщениями больше года.
JScript меняющиеся картинки
    #37082892
Rezzz
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
подскажите, пожалуйста!
если у меня папка с десятками картинок, как изменить код чтобы не прописывать названия всех картинок. а просто чтоб случайную выбирал из папки. картинки названы image1.jpg ... image100.jpg
...
Рейтинг: 0 / 0
JScript меняющиеся картинки
    #37083343
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Rezzz , если есть серверный язык (например csp) все делается просто

Код: plaintext
<img src='img/image#($r( 100 )\ 1 + 1 )#.jpg' />
...
Рейтинг: 0 / 0
Период между сообщениями больше года.
JScript меняющиеся картинки
    #38683346
у меня после картинки которая находится в "<img id="im" src="" />" появляется значек "нет картинки" с адресом " http://localhost/index.php/undefined" а потом он сменяется первой картинкой из массива.
В чем может быть проблема?
...
Рейтинг: 0 / 0
JScript меняющиеся картинки
    #38683427
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Виктор_Орену меня после картинки которая находится в "<img id="im" src="" />" появляется значек "нет картинки" с адресом " http://localhost/index.php/undefined" а потом он сменяется первой картинкой из массива.
В чем может быть проблема?

в том, что значение переменной устанавливается уже после первого обращения к ней. (если я правильно понял)
Больше ничего сказать невозможно, тут не экстрасенсы ;)
...
Рейтинг: 0 / 0
JScript меняющиеся картинки
    #38683549
Програмёрв том, что значение переменной устанавливается уже после первого обращения к ней. (если я правильно понял)
Больше ничего сказать невозможно, тут не экстрасенсы ;)

Выяснил, что переменная i изначально равна 5.
т.е. значение переменной после загрузки страницы меняется следующим образом: 5 1 2 3 1 2 3 1 2 3 и т.д.
переменная i на странице нигде больше не используется, разобраться в чем дело не смог и поэтому просто увеличил число элементов массива до 6 и изменил условие проверки на "if(i>5)i=0;"
...
Рейтинг: 0 / 0
JScript меняющиеся картинки
    #38683757
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Виктор_ОренПрограмёрв том, что значение переменной устанавливается уже после первого обращения к ней. (если я правильно понял)
Больше ничего сказать невозможно, тут не экстрасенсы ;)

Выяснил, что переменная i изначально равна 5.
т.е. значение переменной после загрузки страницы меняется следующим образом: 5 1 2 3 1 2 3 1 2 3 и т.д.
переменная i на странице нигде больше не используется, разобраться в чем дело не смог и поэтому просто увеличил число элементов массива до 6 и изменил условие проверки на "if(i>5)i=0;"

особенность js. любой паскаль или Си уже бы ругнулся 150 раз на факт обращения к не инициализированному значению. Однако для js это всё фигня, у него есть такая особенность (я бы сказал, это скорее всего косяк, который получилось продвинуться как нечто новое и крутое) как замыкание. Это когда в локальной области видимости доступны глобальные переменные (от чего настоятельно рекомендуют избавляться в том же php).

Потому, где-то раньше в коде была использована переменная i например в цикле, конечным значением которого являлось 4 (при 5 он не выполнился), после чего остался такой вот хвост... А внутренняя функция этот хвост подцепила, так как ей никто не указал var i или var i = 0; (что более правильно).


Потому наставление - любая используемая в функции переменная должна инициализироваться строго в ней. За исключением редких случаев, когда это является удобным (хотя я считаю что и тогда это не всегда желательно делать... в любом другом языке программирования за такое бы руки оторвали, например как в php).
...
Рейтинг: 0 / 0
JScript меняющиеся картинки
    #38848853
Regul001
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
2Константин,
+ к вопросу, как ?
...
Рейтинг: 0 / 0
25 сообщений из 25, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / JScript меняющиеся картинки
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]