Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / JScript меняющиеся картинки / 25 сообщений из 25, страница 1 из 1
27.07.2009, 10:52
    #36110188
R4z0R
R4z0R
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JScript меняющиеся картинки
Есть папка с 3 фотками, как разместить на странице динамическую фотку, которая бы показывала фотки из этой папки (можно жестко прописать их чтобы не париться со сканированием директории) поочередно с затуханием? Т.е есть текст с фоткой, на которой показалась одна фотка, погасла, появилась вторая, с затуханием исчезла, появилась третья и так по кругу. Где-то видел такой код на jscript, выглядел просто, но теперь не могу найти
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.07.2009, 11:04
    #36110242
Ex_Soft
Ex_Soft
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JScript меняющиеся картинки
тынць
_________________
"Helo, word!" - 17 errors 56 warnings
Posted via ActualForum NNTP Server 1.4
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.07.2009, 12:22
    #36110551
R4z0R
R4z0R
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JScript меняющиеся картинки
нашел вот такой вариант - все супер, но почему-то в начале показа нет картинки, а потом все ок, идет показ с 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
| Ответить | Цитировать | Написать  
27.07.2009, 12:30
    #36110581
Ex_Soft
Ex_Soft
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JScript меняющиеся картинки
R4z0R
почему-то в начале показа нет картинки
Код: plaintext
1.
<img id="im" src="" />

_________________
"Helo, word!" - 17 errors 56 warnings
Posted via ActualForum NNTP Server 1.4
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.07.2009, 12:38
    #36110614
R4z0R
R4z0R
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JScript меняющиеся картинки
блин, точно. Спасибо
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.07.2009, 14:32
    #36111031
R4z0R
R4z0R
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JScript меняющиеся картинки
Нашел с эффектом 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
| Ответить | Цитировать | Написать  
27.07.2009, 14:50
    #36111105
Ex_Soft
Ex_Soft
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JScript меняющиеся картинки
Не ленитесь
: тынць -> тынць (как вариант
)
_________________
"Helo, word!" - 17 errors 56 warnings
Posted via ActualForum NNTP Server 1.4
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.07.2009, 14:54
    #36111120
Ex_Soft
Ex_Soft
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JScript меняющиеся картинки
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
| Ответить | Цитировать | Написать  
27.07.2009, 15:02
    #36111150
R4z0R
R4z0R
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JScript меняющиеся картинки
Ex_Soft
Не ленитесь
: тынць -> тынць (как вариант
)
_________________
"Helo, word!" - 17 errors 56 warnings

не заметил что по второй ссылке правленый вариант. Я такой же код привел, только мой вариант корявый, а по второму тынцу работает во всех браузерах. Сенкс
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.07.2009, 15:28
    #36111253
R4z0R
R4z0R
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JScript меняющиеся картинки
не пойму, где меняется время отображения самой фотки между переходами? Ткните носом плз:
Код: 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
| Ответить | Цитировать | Написать  
27.07.2009, 15:33
    #36111264
Ex_Soft
Ex_Soft
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JScript меняющиеся картинки
R4z0R
время

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

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

да я понял что менять нужно
Код: plaintext
1.
2.
timer=setInterval("showimage()", 100 );
timer=setInterval("hideimage()", 100 );
но получается только: смена картинки->нужная пауза->и медленное затухание
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.07.2009, 09:37
    #36112529
R4z0R
R4z0R
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JScript меняющиеся картинки
нужно вот такой же эффект
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.07.2009, 09:50
    #36112551
Ex_Soft
Ex_Soft
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JScript меняющиеся картинки
Все, что необходимо чтобы добиться Вашей хотелки Вам уже, IMHO, приподнесли. Или включайте моск или сюда .
_________________
"Helo, word!" - 17 errors 56 warnings
Posted via ActualForum NNTP Server 1.4
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.07.2009, 12:08
    #36112971
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JScript меняющиеся картинки
Ладно уж:
Код: 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
| Ответить | Цитировать | Написать  
28.07.2009, 12:10
    #36112979
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JScript меняющиеся картинки
ПС.
Собственно параметр в nextimg() не используется. На всякий случай написал.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.07.2009, 13:23
    #36113193
R4z0R
R4z0R
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JScript меняющиеся картинки
ShSergeПС.
Собственно параметр в nextimg() не используется. На всякий случай написал.
Спасибо за помощь, но пока был в поиске - не увидел ответ. То что как раз доктор прописал - нашел тут
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.08.2009, 12:40
    #36169037
2Константин
2Константин
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JScript меняющиеся картинки
авторнашел вот такой вариант - все супер, но почему-то в начале показа нет картинки, а потом все ок, идет показ с 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
| Ответить | Цитировать | Написать  
Период между сообщениями больше года.
27.01.2011, 20:45
    #37082892
Rezzz
Rezzz
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JScript меняющиеся картинки
подскажите, пожалуйста!
если у меня папка с десятками картинок, как изменить код чтобы не прописывать названия всех картинок. а просто чтоб случайную выбирал из папки. картинки названы image1.jpg ... image100.jpg
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.01.2011, 09:11
    #37083343
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JScript меняющиеся картинки
Rezzz , если есть серверный язык (например csp) все делается просто

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

в том, что значение переменной устанавливается уже после первого обращения к ней. (если я правильно понял)
Больше ничего сказать невозможно, тут не экстрасенсы ;)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.06.2014, 12:04
    #38683549
Виктор_Орен
Виктор_Орен
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JScript меняющиеся картинки
Програмёрв том, что значение переменной устанавливается уже после первого обращения к ней. (если я правильно понял)
Больше ничего сказать невозможно, тут не экстрасенсы ;)

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

Выяснил, что переменная 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
| Ответить | Цитировать | Написать  
06.01.2015, 05:51
    #38848853
Regul001
Regul001
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JScript меняющиеся картинки
2Константин,
+ к вопросу, как ?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / JScript меняющиеся картинки / 25 сообщений из 25, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 387ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1446385]:
 0ms
get settings:
 8ms
get forum list:
 15ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 55ms
get topic data:
 10ms
get forum data:
 3ms
get page messages:
 62ms
get tp. blocked users:
 3ms
others: 223ms
total:  387ms
x
x
Закрыть


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