ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Плавный переход между картинками - JS
64 сообщений из 64, показаны все 3 страниц
  все  
Плавный переход между картинками - JS
    #35418958
p4sh0k
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
p4sh0k
Гость
Здравствуйте, помогите пожалуйста сделать плавный переход между картинками
Я нашел в интернете скриптик для этого, но там это сделано только для одной кртинки, а мне на страничке нужно менять картинки в трех местах, и в каждом месте будут разные группы картинок, а не одинаковые.
Мне удалось немного получить что я хочу, но до конца это так и не работает..
Может быть ктото знает как это сделать, я JS только начал изучать.. потому самому никак не получается, а очень нужно.
Заранее благодарен.

Вот то что я нашел в интернете:
Код: 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.
Код JS:

<script>
var slide = new Array;
var pictureName = new Array("photo_1.jpg", "photo_2.jpg", "photo_3.jpg");
for (var i =  0 ; i < pictureName.length; i++) {
     slide[i] = new Image();
     slide[i].src = pictureName[i];
}
var m = new Array( 0 ,  100 );
var nextImage =  0 ;
var t = "";

function next() {
   if (t != "") return;
   m[ 0 ] =  0 ;
   m[ 1 ] =  100 ;
   nextImage = nextImage +  1 ;
   if (nextImage == pictureName.length) { nextImage =  0 ; }  
   document.getElementById("after").src = slide[nextImage].src;
   change_slide();
}

function change_slide() {
  m[ 0 ] +=  1 ;
  m[ 1 ] -=  1 ;
  document.getElementById("before_div").style.opacity = m[ 1 ]/ 100 ;
  document.getElementById("after_div").style.opacity = m[ 0 ]/ 100 ;
  document.getElementById("after_div").style.filter="alpha(opacity="+m[ 0 ]+")";
  document.getElementById("before_div").style.filter="alpha(opacity="+m[ 1 ]+")";
  t = setTimeout("change_slide()", 5 );
  if (m[ 0 ] >  98 ) {
     clearTimeout(t);
     document.getElementById("before").src = slide[nextImage].src;
     document.getElementById("before_div").style.opacity =  100 ;
     document.getElementById("before_div").style.filter="alpha(opacity=0)";
     t = ""; setTimeout("next()", 3000 );
  } }
</script>


HTML код:

<style>
.pic { position: absolute; top: 100px; left: 100px }
</style>

<body onload="setTimeout('next()',3000)">

<div id="after_div" class="pic"><img id="after" src="photo_2.jpg"></div>
<div id="before_div" class="pic"><img id="before" src="photo_1.jpg"></div>

</body>

мне нужно чтобы в HTML было чтото наподобие:

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
<style>
.pic { position: absolute; top: 100px; left: 100px }
.pic2 { position: absolute; top: 100px; left: 500px }
</style>

<body onload="setTimeout('next()',3000)">

<div id="after_div" class="pic"><img id="after" src="photo_2.jpg"></div>
<div id="before_div" class="pic"><img id="before" src="photo_1.jpg"></div>

<div id="after_div2" class="pic2"><img id="after2" src="photo2_2.jpg"></div>
<div id="before_div2" class="pic2"><img id="before2" src="photo2_1.jpg"></div>

</body>
...
Рейтинг: 0 / 0
08.07.2008, 23:06:32
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #35419018
p4sh0k
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
p4sh0k
Гость
Неужели никто не знает как сделать.
Отпишитесь пожалуйста, мне очень срочно нужно..
Там наверняка разбирающемуся человеку пару минут код поправить и все.

Я пробовал просто добавить новых переменный в скрипт, но чтото не работает..
Я раньше с++ изучал, вроде логику построения циклов, условий и прочего понимаю, но тут почему то не хочет работать и все

Вот могу приложить то что у меня получилось:
Код: 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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>

var slide = new Array;
var slide2 = new Array;
var pictureName = new Array("photo_1.jpg", "photo_2.jpg", "photo_3.jpg");
var pictureName2 = new Array("photo2_1.jpg", "photo2_2.jpg", "photo2_2.jpg");
for (var i =  0 ; i <  3 ; i++) {
     slide[i] = new Image();
     slide[i].src = pictureName[i];
     slide2[i] = new Image();
     slide2[i].src = pictureName2[i];
}

var m = new Array( 0 ,  100 );
var nextImage =  0 ;
var t = "";

function next() {
   if (t != "") return;
   m[ 0 ] =  0 ;
   m[ 1 ] =  100 ;
   nextImage = nextImage + step;
   if (nextImage ==  3 ) { nextImage =  0 ; }  
   document.getElementById("after").src = slide[nextImage].src;
   document.getElementById("after2").src = slide2[nextImage].src;
   change_slide();
}

function change_slide() {
  m[ 0 ] +=  1 ;
  m[ 1 ] -=  1 ;
  document.getElementById("before_div").style.opacity = m[ 1 ]/ 100 ;
  document.getElementById("before_div2").style.opacity = m[ 1 ]/ 100 ;
  document.getElementById("after_div").style.opacity = m[ 0 ]/ 100 ;
  document.getElementById("after_div2").style.opacity = m[ 0 ]/ 100 ;
  document.getElementById("after_div").style.filter="alpha(opacity="+m[ 0 ]+")";
  document.getElementById("after_div2").style.filter="alpha(opacity="+m[ 0 ]+")";
  document.getElementById("before_div").style.filter="alpha(opacity="+m[ 1 ]+")";
  document.getElementById("before_div2").style.filter="alpha(opacity="+m[ 1 ]+")";
  t = setTimeout("change_slide()", 5 );
  if (m[ 0 ] >  98 ) {
     clearTimeout(t);
     document.getElementById("before").src = slide[nextImage].src;
     document.getElementById("before2").src = slide2[nextImage].src;
     document.getElementById("before_div").style.opacity =  100 ;
     document.getElementById("before_div2").style.opacity =  100 ;
     document.getElementById("before_div").style.filter="alpha(opacity=0)";
     document.getElementById("before_div2").style.filter="alpha(opacity=0)";
     t = ""; setTimeout("next()", 1000 );
  } }
</script>

<style>
.pic { position: absolute; top: 100px; left: 10px }
.pic2 { position: absolute; top: 100px; left: 300px }
</style>
</head>
<body onload="setTimeout('next()',1000)">

<div id="after_div" class="pic"><img id="after" src="photo_2.jpg"></div>
<div id="before_div" class="pic"><img id="before" src="photo_1.jpg"></div>

<div id="after_div2" class="pic2"><img id="after2" src="photo2_2.jpg"></div>
<div id="before_div2" class="pic2"><img id="before2" src="photo2_1.jpg"></div>

</body></html>
...
Рейтинг: 0 / 0
09.07.2008, 00:08:30
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #35419080
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
вот же народ... Понасоздают кучу элементов, еще и id'ы всем назначат, и давай поэму на js строчить - массивы какие-то, бесконечные обращения по ид.... Бррр...

Мой вариант (по идее должно работать):
Код: 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.
<script>
function Animate(divId)
{
	var oThis = this;
	var aImg  = document.getElementById(divId).getElementsByTagName('img');
	var m1 =  100 , m2 =  0 , nextImage =  0 , t = "";
	var oImg1 = '', oImg2 = '';

	this.next = function()
	{
		if (t != "") return;
		m1 =  100 ;
		m2 =  0 ;
		oImg1 = aImg[nextImage];	
		nextImage++;
		if (nextImage == aImg.length) { nextImage =  0 ; }  
		oImg2 = aImg[nextImage];	
		oThis.changeSlide();
	}

	this.changeSlide = function(){
		m1--; m2++;
		oImg1.style.opacity = m1/ 100 ;
		oImg1.style.filter="alpha(opacity="+m1+")";
		oImg2.style.opacity = m2/ 100 ;
		oImg2.style.filter="alpha(opacity="+m2+")";
		t = setTimeout(oThis.changeSlide, 5 );
		if (m2 ==  100 ) {
			clearTimeout(t); t = ""; 
			setTimeout(oThis.next, 3000 );
		}
	}

	setTimeout(oThis.next, 1000 );
}

window.onload = function() { new Animate('img1'); new Animate('img2');  }
</script>

<style>
.pic1 { position: absolute; opacity: 1 ; filter:alpha(opacity= 100 );}
.pic2 { position: absolute; opacity: 0 ; filter:alpha(opacity= 0 );}
#img1 { position: relative; top: 100px; left: 100px; }
#img2 { position: relative; top: 100px; left: 500px; }
</style>

<div id="img1">
	<img class="pic1" src="1.jpg">
	<img class="pic2" src="2.jpg">
	<img class="pic2" src="3.jpg">
</div>

<div id="img2">
	<img class="pic1" src="4.jpg">
	<img class="pic2" src="5.jpg">
</div>
...
Рейтинг: 0 / 0
09.07.2008, 02:14:56
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #35419081
apapacy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
apapacy
Участник
Ваш скрипт использует глобалные переменные. Пожтому и работает только для одной картинки.
В можете поместить весь скрипт в тло одной функции:
function outer() {
// скрипт
}
а затем трижды вызвать эту функцию с нужными параметрами
...
Рейтинг: 0 / 0
09.07.2008, 02:17:58
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #35426503
p4sh0k
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
p4sh0k
Гость
проверил выше приведенный скрипт от illion , все работает отлично, спасибо

только возникло небольшое замечание от заказчика

на моем то компьютере все работает синхронно
но на более медленных машинах (видимо как та с которой данную страничку просматривали они) первая картинка меняется немного быстрее второй
я конечно понимаю, что это вызвано тем, что функции для смены картинок вызываются поочереди
Код: plaintext
window.onload = function() { new Animate('img1'); new Animate('img2');

но все же, нельзя ли как нибудь переделать данный код чтобы картинки загружались одновременно ?
например загружать в программу сразу все блоки картинок и менять прозрачность сразу на всех в одном и том же "цикле"
заранее известно, что будет 3 блока, в каждом из которых по три картинки (в названии отличающиеся только индексами)..
...
Рейтинг: 0 / 0
11.07.2008, 22:07:12
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #35426512
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
p4sh0k
Ага. принеси дерьма, принеси ложку, попробуй. Тебе уже illion и так уже всё написала.
...
Рейтинг: 0 / 0
11.07.2008, 22:15:46
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #35426513
p4sh0k
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
p4sh0k
Гость
а что сразу с наездами то?! как на рынке вещевом себя ведешь!!
...
Рейтинг: 0 / 0
11.07.2008, 22:19:14
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #35426514
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
p4sh0k...нельзя ли как нибудь переделать данный код...
Это я к вот этому.
...
Рейтинг: 0 / 0
11.07.2008, 22:21:31
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #35426749
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
p4sh0k
на моем то компьютере все работает синхронно
но на более медленных машинах (видимо как та с которой данную страничку просматривали они) первая картинка меняется немного быстрее второй
я конечно понимаю, что это вызвано тем, что функции для смены картинок вызываются поочереди

проверила на старой машине (наконец-то она пригодилась :-) ) - действительно работает не синхронно. Причем не то чтобы вторая от первой отставала, нет же - асинхронность абсолютно фонарная (то первая картинка вперед успевает, то вторая, иногда одновременно.) Скорее всего это связано с загрузкой интерпретатора на момент срабатывания таймера и как этот эффект устранить - я не знаю. Если это так критично, то надо попробовать создавать не два отдельных объекта, а напихать все в один (некрасиво конечно, но ...).
...
Рейтинг: 0 / 0
12.07.2008, 14:18:09
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #35426806
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
illionнапихать все в один
Код: 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.
function Animate(aDivId)
{
	var oThis = this;
	var m1 =  100 , m2 =  0 , t="";
	var animImg = {};
	for (var i= 0 ; i < aDivId.length; i++)
	{	 
		animImg[aDivId[i]] = {
			'aImg' : document.getElementById(aDivId[i]).getElementsByTagName('img'),
			'nextImage' :  0 
		};
	}
	
	this.next = function()
	{
		for (var i in animImg)
		{
			if (t != "") return;
			m1 =  100 ;
			m2 =  0 ;
			animImg[i].oImg1 = animImg[i].aImg[animImg[i].nextImage];	
			animImg[i].nextImage++;
			if (animImg[i].nextImage == animImg[i].aImg.length) { animImg[i].nextImage =  0 ; }  
			animImg[i].oImg2 = animImg[i].aImg[animImg[i].nextImage];	
		}
		oThis.changeSlide();
	}

	this.changeSlide = function(){
		for (var i in animImg)
		{
			m1--; m2++;
			animImg[i].oImg1.style.opacity = m1/ 100 ;
			animImg[i].oImg1.style.filter="alpha(opacity="+m1+")";
			animImg[i].oImg2.style.opacity = m2/ 100 ;
			animImg[i].oImg2.style.filter="alpha(opacity="+m2+")";
		}
		t = setTimeout(oThis.changeSlide, 5 );
		if (m2 ==  100 ) 
		{
			clearTimeout(t); t = ""; 
			setTimeout(oThis.next, 3000 );
		}
	}

	setTimeout(oThis.next, 1000 );
}

window.onload = function() { Animate(['img1','img2']); }
...
Рейтинг: 0 / 0
12.07.2008, 15:48:03
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #35426810
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
дочитала про "заранее известно, что будет 3 блока" :-). Последний вариант как раз делает примерно то, что Вы описали.
...
Рейтинг: 0 / 0
12.07.2008, 15:53:30
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #35457263
p4sh0k
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
p4sh0k
Гость
спасибо огромное))
пригодилось
...
Рейтинг: 0 / 0
29.07.2008, 11:32:10
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #35953753
galileopro
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
galileopro
Гость
Ребята, я в JavaScript далеко не профи:)Никак не пойму
Это работает
var pictureName = new Array("scrin1.jpg", "scrin2.jpg", "scrin3.jpg", "scrin4.jpg");
var im=document.createElement('img');
im.src=pictureName[i];
document.body.appendChild(im);
im.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=50)"
А это - нет:
var pictureName = new Array("scrin1.jpg", "scrin2.jpg", "scrin3.jpg", "scrin4.jpg");
var im=document.createElement('img');
var clarity=50;
im.src=pictureName[i];
document.body.appendChild(im);
im.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=clarity)"
Если кто-то знает, как переделать код, чтобы работало с var clarity="Значение" Напишите
...
Рейтинг: 0 / 0
25.04.2009, 09:33:24
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36196553
arbin
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
arbin
Гость
Всем привет.
Illion, я плохо понимаю в css, пожалуйста, подскажите, как можно реализовать с помощью Вашей функции несколько модулей смены картинок на одной странице, например, в ячейках таблицы?

В первой ячейке таблицы размещаю первый блок картинок:

<div class="background" style="position: relative; width: 170px; height: 100px;">
<style>
.pic1 {position:absolute;top:0;bottom:0;height:100px;width:170px;margin:auto;opacity:1;filter:alpha(opacity=100);}
.pic2 {position:absolute;top:0;bottom:0; height:100px;width:170px;margin:auto;opacity:0;filter:alpha(opacity=0);}
#img1 { position:absolute;top:0;bottom:0; height:100px;width:170px;margin:auto; }
#img2 { position:absolute;top:0;bottom:0; height:100px;width:170px;margin:auto; }
</style>

<div id="img1">
<img class="pic2" src="<img class="pic2" src="image001.jpg">
</div>

<div id="img2">
<img class="pic2" src="image001.jpg">
<img class="pic2" src="image002.jpg">
<img class="pic2" src="image003.jpg">
<img class="pic2" src="image004.jpg">
<img class="pic2" src="image005.jpg">
</div>

Второй блок картинок пытаюсь поместить в другую ячейку таблицы, но отображаются они там же, где и первый блок:

Вот второй блок картинок.

<div id="img1">
<img class="pic2" src="<img class="pic2" src="image011.jpg">
</div>

<div id="img2">
<img class="pic2" src="image011.jpg">
<img class="pic2" src="image012.jpg">
<img class="pic2" src="image013.jpg">
<img class="pic2" src="image014.jpg">
<img class="pic2" src="image015.jpg">
</div>

Что нужно указывать в style или где-то еще чтобы разместить на странице сколько угодно независимых блоков смены картинок или функцию нужно доделать?
...
Рейтинг: 0 / 0
15.09.2009, 13:32:03
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36196751
EmilRegis
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
EmilRegis
Участник
а чего у вас везде position:absolute и позиционирование одинаковое? у вас же все дивы на одном и том же месте будут
...
Рейтинг: 0 / 0
15.09.2009, 14:29:28
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36196768
EmilRegis
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
EmilRegis
Участник
аа понял...в общем в стилях вы указываете где у вас будет располагаться тот или иной элемент...так как у вас написано
Код: plaintext
1.
2.
3.
4.
5.
6.
<style>
.pic1 {position:absolute;top: 0 ;bottom: 0 ;height:100px;width:170px;margin:auto;opacity: 1 ;filter:alpha(opacity= 100 );}
.pic2 {position:absolute;top: 0 ;bottom: 0 ; height:100px;width:170px;margin:auto;opacity: 0 ;filter:alpha(opacity= 0 );}
#img1 { position:absolute;top: 0 ;bottom: 0 ; height:100px;width:170px;margin:auto; }
#img2 { position:absolute;top: 0 ;bottom: 0 ; height:100px;width:170px;margin:auto; }
</style>
то соответственно все элементы с такими id и классами будут на одном и том же месте страницы
...
Рейтинг: 0 / 0
15.09.2009, 14:33:11
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36196904
arbin
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
arbin
Гость
Такя я помещаю в ячейку таблицы:

<div class="background" style="position: relative; width: 170px; height: 100px;">
А уже на нем располагаю картинки.

Если я пишу
<style>
.pic1 {position:absolute;top:200;bottom:0;height:100px;width:170px;margin:auto;opacity:1;filter:alpha(opacity=100);}
.pic2 {position:absolute;top:200;bottom:0; height:100px;width:170px;margin:auto;opacity:0;filter:alpha(opacity=0);}
#img1 { position:absolute;top:200;bottom:0; height:100px;width:170px;margin:auto; }
#img2 { position:absolute;top:200;bottom:0; height:100px;width:170px;margin:auto; }
</style>
, то появляется просто статическая картинка:

Указанная функция работает для img1, img2
window.onload = function() { Animate(['img1','img2']); }

Как, используя указанную функцию Animate(aDivId) работать с группами картинок в любом месте страницы?
...
Рейтинг: 0 / 0
15.09.2009, 15:05:44
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36202550
Elain
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Elain
Участник
Кхе-кхе!!! Товарищи.... а не проще ли организовать данный плагин на JQuery.... И не изобретать велосипед? В нем имеется стандартный функционал для анимации DOM модели.
...
Рейтинг: 0 / 0
17.09.2009, 18:38:45
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36202722
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
ElainКхе-кхе!!! Товарищи.... а не проще ли организовать данный плагин на JQuery.... И не изобретать велосипед? В нем имеется стандартный функционал для анимации DOM модели.
Давай рабочий примерчик, что-ли? Именно конкретный. Уже достали некоторые другие мемберы, чесн. слово, своим жквери. Я вот не понимаю - а в чём фишка-то?
...
Рейтинг: 0 / 0
17.09.2009, 20:24:26
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36202746
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
ShSergeЯ вот не понимаю - а в чём фишка-то?Ты ещё не проникся религией JQuery?
...
Рейтинг: 0 / 0
17.09.2009, 20:36:27
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36202779
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
Яростный МечShSergeЯ вот не понимаю - а в чём фишка-то?Ты ещё не проникся религией JQuery?
Поюзал, но не проникся. Двигаю тему "Pure Javascript". Это слово я только-что придумал. Идея заключается в том, что у тебя на странице не будет яваскриптового кода, который никогда не выполняется.
Фишка в том, что по мере надобности всегда загрузить чего-то можно . А серьёзно - вот страница, вот конкретно для неё код. Чисто конкретно для страницы. Никаких библиотек и т.д. .
ПС. Слово "аякс" придумал не я. Но, прекрасно помню, что меня материли (уважаемые, кстати люди) за то, что страница может чего-то делать без перезагрузки. Правда, заказчику так больше понравилось. Делал я это много раз и по разному - через невидимые ява-апплеты, ифреймы и креате тэг яваскрипт - и сейчас так делаю. Намучился бороться, но когда фича получила название (AJAX типа) - всё ОК. Думаю то же и сейчас сделать. Пойдёшь в соавторы?
...
Рейтинг: 0 / 0
17.09.2009, 21:04:00
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36202789
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
ShSergeПС. Слово "аякс" придумал не я. Но, прекрасно помню, что меня материли (уважаемые, кстати люди) за то, что страница может чего-то делать без перезагрузки. Правда, заказчику так больше понравилось. Делал я это много раз и по разному - через невидимые ява-апплеты, ифреймы и креате тэг яваскрипт - и сейчас так делаю. Намучился бороться, но когда фича получила название (AJAX типа) - всё ОК.Ты один из тех гигантов мысли, которые делали аякс в "доаяксовый период"? Респект!
Но что это были за люди, которые такое не заценили?

ShSergeПойдёшь в соавторы? В соавторы "Pure JS"? Идея, конечно, симпатичная, но новая ли? Есть ли в ней "научная новизна"?
...
Рейтинг: 0 / 0
17.09.2009, 21:14:07
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36202833
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
Яростный Меч...Идея, конечно, симпатичная, но новая ли? Есть ли в ней "научная новизна"?
Тьфу-ты. Назание надо поменять. Ламеры и тут опередили.
Может тогда Strong Javascript или ещё как? Аббревиатура SJS - не так уж и плохо, типа, моё имя, отчество и фамилия.
ПС. Но с аяксом - да лохонулся таки.
...
Рейтинг: 0 / 0
17.09.2009, 21:57:45
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36202854
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
ShSergeЯростный Меч...Идея, конечно, симпатичная, но новая ли? Есть ли в ней "научная новизна"?
Тьфу-ты. Назание надо поменять. Ламеры и тут опередили.
Может тогда Strong Javascript или ещё как? Аббревиатура SJS - не так уж и плохо, типа, моё имя, отчество и фамилия. Как насчет True JavaScript ? Вроде не распространено
...
Рейтинг: 0 / 0
17.09.2009, 22:19:59
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36202863
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
Яростный Меч,

Годится. Надо место в википедии забивать. Только, я ещё статью не сочинил. Идейка-то только сейчас возникла!
...
Рейтинг: 0 / 0
17.09.2009, 22:33:47
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36203188
Фотография WYPMAH
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
WYPMAH
Участник
ShSergeу тебя на странице не будет яваскриптового кода, который никогда не выполняется.
+100!

ShSergeНадо место в википедии забивать. Только, я ещё статью не сочинил.
=)))

_______________
AnimeBay - аниме магазин, который Вас не разочарует.
...
Рейтинг: 0 / 0
18.09.2009, 09:33:13
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36203572
arbin
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
arbin
Гость
И все-таки кто-нибудь подскажет как использовать скрипт для двух наборов картинок на одной странице?
...
Рейтинг: 0 / 0
18.09.2009, 11:35:38
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36203615
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
arbinИ все-таки кто-нибудь подскажет как использовать скрипт для двух наборов картинок на одной странице?
В этом топике уже был ответ. Чем предложение illion не нравится?
...
Рейтинг: 0 / 0
18.09.2009, 11:45:04
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36207993
arbin
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
arbin
Гость
Этот скрипт выводит картинки в одном месте экрана, мне нужно в нескольких местах, т.е. 2 набора меняющихся картинок, например, в ячейках таблицы. Как позионировать несколько наборов, используя одну фукнцию?
...
Рейтинг: 0 / 0
21.09.2009, 15:25:15
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36208287
Фотография mahoune
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mahoune
Участник
Передавать функции объект где надо перерисовать картинку.

Код: plaintext
.mahoune.
...
Рейтинг: 0 / 0
21.09.2009, 17:01:00
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36209045
Фотография WYPMAH
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
WYPMAH
Участник
arbinмне нужно в нескольких местах
чуток модифицируйте и будет, то что вы хотите, там ведь идея показана, что ещё нужно?

_______________
AnimeBay - аниме магазин, который Вас не разочарует.
...
Рейтинг: 0 / 0
22.09.2009, 09:27:56
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36209426
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
Яростный МечShSergeЯростный Меч...Идея, конечно, симпатичная, но новая ли? Есть ли в ней "научная новизна"?
Тьфу-ты. Назание надо поменять. Ламеры и тут опередили.
Может тогда Strong Javascript или ещё как? Аббревиатура SJS - не так уж и плохо, типа, моё имя, отчество и фамилия. Как насчет True JavaScript ? Вроде не распространеноjsЪ
Можно и трушный логотип из такой аббревиатуры запилить.))
...
Рейтинг: 0 / 0
22.09.2009, 11:16:08
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36214097
arbin
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
arbin
Гость
WYPMAHarbinмне нужно в нескольких местах
чуток модифицируйте и будет, то что вы хотите, там ведь идея показана, что ещё нужно?

_______________
AnimeBay - аниме магазин, который Вас не разочарует.


К сожалению, я не веб-дизайнер, поэтому как модифицировать скрипт, чтобы получить смены разных наборов картинок в разных ячейках не знаю. Потратил 3 дня, но не смог сделать. Поэтому и обращаюсь к форумчанам.
Какие параметры указывать для наборов картинок, чтобы отображать наборы картинок в отдельных ячейках.
У меня на кошельке в Яндекс-деньгах осталось 100 руб., готов сразу перевести их (за вычетом комиссии Яндекса) тому, кто покажет конкретный пример, как должно работать.
Спасибо.

Напоминаю свой пример (позиции картинок абсолютные относительно background, сам background находится в ячейке таблицы).

<div class="background" style="position: relative; width: 170px; height: 100px;">
<style>
.pic1 {position:absolute;top:0;bottom:0;height:100px;width:170px;margin:auto;opacity:1;filter:alpha(opacity=100);}
.pic2 {position:absolute;top:0;bottom:0; height:100px;width:170px;margin:auto;opacity:0;filter:alpha(opacity=0);}
#img1 { position:absolute;top:0;bottom:0; height:100px;width:170px;margin:auto; }
#img2 { position:absolute;top:0;bottom:0; height:100px;width:170px;margin:auto; }
</style>

<div id="img1">
<img class="pic2" src="<img class="pic2" src="image001.jpg">
</div>

<div id="img2">
<img class="pic2" src="image001.jpg">
<img class="pic2" src="image002.jpg">
<img class="pic2" src="image003.jpg">
<img class="pic2" src="image004.jpg">
<img class="pic2" src="image005.jpg">
</div>

Второй блок картинок пытаюсь поместить в другую ячейку таблицы, но отображаются они там же, где и первый блок:

Вот второй блок картинок.

<div id="img1">
<img class="pic2" src="<img class="pic2" src="image011.jpg">
</div>

<div id="img2">
<img class="pic2" src="image011.jpg">
<img class="pic2" src="image012.jpg">
<img class="pic2" src="image013.jpg">
<img class="pic2" src="image014.jpg">
<img class="pic2" src="image015.jpg">
</div>
...
Рейтинг: 0 / 0
24.09.2009, 09:44:20
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36214893
Lehik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Lehik
Гость
Здравствуйте! Может и мне поможете. Есть страничка написанная на asp. В ней запрос к БД в котором выбирается номер(id) картинки и ее описание. Потом в цикле по одной выводишь записи и делаешь MoveNext пока не закончится recordset. Все это хорошо если нужно вывести сразу все картинки и описания к ним. А мне нужно, чтоб они выводились по одной, и чтоб было что-то типа кнопки вперед/назад. Вот и подошли к вопросу - как это можно организовать? чтоб по щелчку мыши срабатывал MoveNext и выводились картинки согласно сдвинутой записи. Нутром чую что как-то через jscript, но я его совсем не знаю. Если не сможете помочь, то хотяб подскажите куда копать?. Заранее спасибо.
Вот часть кода asp-странички:
Код: 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.
Dim IdM, Menu1, HTM, HTMtmp
Dim Conn, Conn1, Rs, Rs1, strSQL, strOrder, strSelect, strWhere, strFrom, Descr, hrf, nametmp
Dim database

Set HTM = New iString
Set HTMtmp = New iString

Set Conn = Server.CreateObject("ADODB.Connection")
Conn.Open Application("SOURCE_I")

StrSQL = "Select ID, NAME, DESCRIPTION "
StrSQL = StrSQL & MultiTableSQL("PRESENTATION","",LangID)
StrSQL = StrSQL & " and PARENT_ID=2"

Set Rs = Conn.Execute(StrSQL)

HTM.Add "<center>"
If Not Rs.BOF and Not Rs.EOF Then
   While Not Rs.EOF
	If Not IsNull(Rs("DESCRIPTION")) Then HTM.Add Rs("DESCRIPTION") & "<br>"
	HTM.Add "<img src='http://server.ru/files/IGZ/PRESENTATION/" & Rs("ID") & ".jpg' width=50% ><br>"
	HTM.Add Rs("NAME") & "<br>"
           Rs.MoveNext
   Wend

End If
...
Рейтинг: 0 / 0
24.09.2009, 13:46:25
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36214976
Фотография WYPMAH
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
WYPMAH
Участник
arbin
такой вариант вас устроит:
автор
Код: 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.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>SlideShow Sample</title>
    <style type="text/css">
        #img1, #img2
        {
            position: relative;
            top:  0 ;
            left:  0 ;
        }
        #img2
        {
            left: 500px;
        }
        .pic1
        {
            position: absolute;
            opacity:  1 ;
            filter: alpha(opacity= 100 );
        }
        .pic2
        {
            position: absolute;
            opacity:  0 ;
            filter: alpha(opacity= 0 );
        }
    </style>

    <script language="javascript" type="text/javascript">
        function AnimateEx(aDivId) {
            var oThis = this;
            var m1 =  100 , m2 =  0 , t = "";
            var animImg = {};

            for (var i =  0 ; i < aDivId.length; i++) {
                animImg[aDivId[i]] = {
                    'aImg': document.getElementById(aDivId[i]).getElementsByTagName('img'),
                    'nextImage':  0 
                };
            }

            this.next = function() {
                for (var i in animImg) {
                    if (t != "") return;
                    m1 =  100 ;
                    m2 =  0 ;
                    animImg[i].oImg1 = animImg[i].aImg[animImg[i].nextImage];
                    animImg[i].nextImage++;
                    if (animImg[i].nextImage == animImg[i].aImg.length) { animImg[i].nextImage =  0 ; }
                    animImg[i].oImg2 = animImg[i].aImg[animImg[i].nextImage];
                }
                oThis.changeSlide();
            }

            this.changeSlide = function() {
                for (var i in animImg) {
                    m1--; m2++;
                    animImg[i].oImg1.style.opacity = m1 /  100 ;
                    animImg[i].oImg1.style.filter = "alpha(opacity=" + m1 + ")";
                    animImg[i].oImg2.style.opacity = m2 /  100 ;
                    animImg[i].oImg2.style.filter = "alpha(opacity=" + m2 + ")";
                }
                t = setTimeout(oThis.changeSlide,  5 );
                if (m2 ==  100 ) {
                    clearTimeout(t); t = "";
                    setTimeout(oThis.next,  3000 );
                }
            }

            setTimeout(oThis.next,  1000 );
        }

    </script>

</head>
<body onload="new AnimateEx(['img1', 'img2']);">
    <div id="img1">
        <img class="pic1" src="/SlideShow/1.jpg" />
        <img class="pic2" src="/SlideShow/2.jpg" />
        <img class="pic2" src="/SlideShow/3.jpg" />
        <img class="pic2" src="/SlideShow/4.jpg" />
        <img class="pic2" src="/SlideShow/5.jpg" />
    </div>
    <div id="img2">
        <img class="pic1" src="/SlideShow/6.jpg" />
        <img class="pic2" src="/SlideShow/7.jpg" />
        <img class="pic2" src="/SlideShow/8.jpg" />
        <img class="pic2" src="/SlideShow/9.jpg" />
        <img class="pic2" src="/SlideShow/10.jpg" />
    </div>
</body>
</html>

?

_______________
AnimeBay - аниме магазин, который Вас не разочарует.
...
Рейтинг: 0 / 0
24.09.2009, 14:13:48
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36216487
arbin
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
arbin
Гость
WYPMAH[quot arbin]
такой вариант вас устроит:
[quot автор]

Не работает корректно для нескольких блоков картинок.
Вот конкретный пример: http://www.nwportal.ru/test.html

Здесь три набора картинок: Фото здания 1, фото участка, фото здания 2.
Каждый набор в отдельной ячейке.
Т.е. для каждой ячейки запускаем функцию со своими параметрами? Какие параметры передавать и что писать в style position

Функция function AnimateEx(aDivId)
<body onload="new AnimateEx(['img1', 'img2']);"> работает для img1, img2

Но как заставить сменяться фотки всех 3-х объектов в этом конкретном примере?
Спасибо.
...
Рейтинг: 0 / 0
25.09.2009, 09:11:56
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36216518
Фотография WYPMAH
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
WYPMAH
Участник
arbinНо как заставить сменяться фотки всех 3-х объектов в этом конкретном примере?
для моего примера так:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
<body onload="new AnimateEx(['img1', 'img2', 'img3']);">
    <div id="img1">
        <img class="pic1" src="/SlideShow/1.jpg" />
        <img class="pic2" src="/SlideShow/2.jpg" />
        <img class="pic2" src="/SlideShow/3.jpg" />
        <img class="pic2" src="/SlideShow/4.jpg" />
        <img class="pic2" src="/SlideShow/5.jpg" />
    </div>
    <div id="img2">
        <img class="pic1" src="/SlideShow/6.jpg" />
        <img class="pic2" src="/SlideShow/7.jpg" />
        <img class="pic2" src="/SlideShow/8.jpg" />
        <img class="pic2" src="/SlideShow/9.jpg" />
        <img class="pic2" src="/SlideShow/10.jpg" />
    </div>
    <div id="img3">
        <img class="pic1" src="/SlideShow/11.jpg" />
        <img class="pic2" src="/SlideShow/12.jpg" />
        <img class="pic2" src="/SlideShow/13.jpg" />
        <img class="pic2" src="/SlideShow/14.jpg" />
        <img class="pic2" src="/SlideShow/15.jpg" />
    </div>
</body>

что касается той ссылки, что вы дали - на кой вы наплодили кучу дивов с одинаковыми айдишниками, сделайте 3 дива для трёх блоков фото и назовите из img1..3, соответственно, и будет вам счастье. Посмотрите пример, что выше, сделайте аналогично, не лепите лишних дивов.

_______________
AnimeBay - аниме магазин, который Вас не разочарует.
...
Рейтинг: 0 / 0
25.09.2009, 09:36:23
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36216589
arbin
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
arbin
Гость
Да, в разных местах получилось расставить, но анимация прокручивается один раз, затем останавливается.
...
Рейтинг: 0 / 0
25.09.2009, 10:16:09
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36216599
arbin
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
arbin
Гость
После следующих загрузок вообще нет анимации
...
Рейтинг: 0 / 0
25.09.2009, 10:20:29
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36220529
arbin
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
arbin
Гость
Кто-нибудь знает как сделать?
...
Рейтинг: 0 / 0
28.09.2009, 14:38:59
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36239123
arbin
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
arbin
Гость
Уважаемые Вебмастера!
Кто-нибудь может помочь в указанной проблеме?
Где illion, модератор данного направления форума?
Это же для вебмастера задача на 10 минут.
Если это платная услуга - сообщите цену.
...
Рейтинг: 0 / 0
08.10.2009, 10:49:08
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36239145
Korcar
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Korcar
Участник
оч не охота разбирать функцию ... затолкай её вызов в setTimeout
...
Рейтинг: 0 / 0
08.10.2009, 10:59:40
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36239383
Фотография WYPMAH
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
WYPMAH
Участник
arbinДа, в разных местах получилось расставить, но анимация прокручивается один раз, затем останавливается.
arbinПосле следующих загрузок вообще нет анимации
значит что-то другое в это виновно, т.к. на чистой странице всё работает, как часы

Korcarзатолкай её вызов в setTimeout
да там и так Timeout выставлен..

_______________
AnimeBay - аниме магазин, который Вас не разочарует.
...
Рейтинг: 0 / 0
08.10.2009, 12:16:53
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36240923
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
arbinУважаемые Вебмастера!
Кто-нибудь может помочь в указанной проблеме?
Где illion, модератор данного направления форума?
Простите, ради интереса - а с чего Вы взяли, что модератор обязан отвечать на все те вопросы, которые не интересны остальным авторам?

Ну, раз уж такая паника, в таблицу дивы не можете сами перенести....

js-код скопируете полностью из поста 5925669 . В стили - небольшие изменения, чтобы ячейки не получились нулевой ширины/высоты.
Код: plaintext
\n<html>\n<head>\n<script>\n//здесь код из поста  5925669 \n</script>\n<style>\n\t.pic1 { position: relative; opacity: 1 ; filter:alpha(opacity= 100 );}\n\t.pic2 { position: absolute; top: 0 ; left: 0 ; opacity: 0 ; filter:alpha(opacity= 0 );}\n\t#img1, #img2 { position: relative; }\n</style>\n</head>\n<body>\n<table border="1">\n\t<tr><th colspan="2">header</th><tr>\n\t<tr>\n\t\t<td>first</td>\n\t\t<td>\n\t\t\t<div id="img1">\n\t\t\t\t<img class="pic1" src="img/1.jpg">\n\t\t\t\t<img class="pic2" src="img/2.jpg">\n\t\t\t\t<img class="pic2" src="img/3.jpg">\n\t\t\t</div>\n\t\t</td>\n\t</tr>\n\t<tr>\n\t\t<td>second</td>\n\t\t<td>\n\t\t\t<div id="img2">\n\t\t\t\t<img class="pic1" src="img/a.jpg">\n\t\t\t\t<img class="pic2" src="img/b.jpg">\n\t\t\t</div>\n\t\t</td>\n\t</tr>\n\t<tr><th colspan="2">footer</th><tr>\n</table>\n</body></html>\n
у .pic1 можно оставить position: absolute и тогда не указывать top:0; left:0 для .pic2, но тогда у дивов #img1 и #img2 должны быть явно заданы размеры. Этот же вариант с явно заданными размерами нужно будет применить в том случае, если изображения в одной ячейке различны по размеру (в примере подразумевается, что они все одинаковые)
...
Рейтинг: 0 / 0
09.10.2009, 01:56:08
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36249922
arbin
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
arbin
Гость
Illion, после того, как я указал размеры для картинок, они не находятся на одном месте.

Вот пример как работает код: http://www.nwportal.ru/test.html

И как реализовать для 3-х и более картинок?
{ Animate(['img1','img2','img3', и т.д.?.]); }
...
Рейтинг: 0 / 0
14.10.2009, 11:50:54
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36250002
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
arbinпосле того, как я указал размеры для картинок, они не находятся на одном месте
очевидно это потому, что position:absolute;top:0;left:0 из примера чудесным образом преобразовалось в position:absolute;top:0;bottom:0...
arbinкак реализовать для 3-х и более картинок?
{ Animate(['img1','img2','img3', и т.д.?.]); }
да, в функцию пердается массив из id дивов-контейнеров
...
Рейтинг: 0 / 0
14.10.2009, 12:13:23
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36250314
arbin
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
arbin
Гость
illion, добавил 3-ю картинку, анимация всех 3-х картинок останавливается.
Пробовал менять параметры в <style> - 3-я картинка "покидает" свое место.
Возможен ли универсальный вариант для любого набора картинок?
...
Рейтинг: 0 / 0
14.10.2009, 13:32:59
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36635988
Ещё не зарегился
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ещё не зарегился
Гость
Народ, подскажите совсем чайнику, и не ругайте пожалуйста, срочно нужно, мануалы листать некогда.

Есть кнопки "предыдущая" и "следующая".
Под ними должны меняться рисунки. Какой код нужен (то же ЦСС) чтобы 128 картинок менялись в одной ячейке по порядку, соответственно нажатию кнопки?
...
Рейтинг: 0 / 0
19.05.2010, 12:01:42
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36636045
Фотография mahoune
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mahoune
Участник
Дайте ссылку на пример, так сложно понять чего вы хотите!
...
Рейтинг: 0 / 0
19.05.2010, 12:15:29
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36636180
Ещё не зарегился
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ещё не зарегился
Гость
mahouneДайте ссылку на пример, так сложно понять чего вы хотите!

Вот задача :) Сейчас и примера такого найти не могу. По моему это какой-то простейшый код, о котором уже давно забыли, через желание показаться красивее других. А сам повторюсь - чайник. Посылали на кучу плагинов, ни один решение не подсказал, все в "яву" прутся.
...
Рейтинг: 0 / 0
19.05.2010, 12:43:22
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36636229
Фотография mahoune
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mahoune
Участник
Типа такого .
...
Рейтинг: 0 / 0
19.05.2010, 12:52:34
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36636246
Фотография mahoune
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mahoune
Участник
Почитайте вот тут .
...
Рейтинг: 0 / 0
19.05.2010, 12:55:16
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36636296
Ещё не зарегился
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ещё не зарегился
Гость
mahoune,

По первой ссылке - у меня ошибка, не находит страницу.

По второй - там говорится, о эскизах маленьких, нажатие на одного из которых приводит к показу большой картинки.

Но спасибо и за попытку помочь)))
Сейчас попробую одну тему, если получится - расскажу, дабы остальным легче было))))
...
Рейтинг: 0 / 0
19.05.2010, 13:08:35
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36636481
Ещё не зарегился
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ещё не зарегился
Гость
Эх, не то. Нашёл прогу скриптовую, а она генерит странички массой.

Может, ещё у кого нибудь мысли по поводу появятся?
...
Рейтинг: 0 / 0
19.05.2010, 13:51:23
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36636671
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Ещё не зарегилсяМожет, ещё у кого нибудь мысли по поводу появятся?
Где-то тут давали ссылку на пример следующего содержания...
- Есть ДИВ-экран, фиксированого размера с оверфлов=хидден
- В нем есть ДИВ-контейнер, в нем все картинки
- при нажатии на кнопки управления, выполняется скролирование дива-контейнера внутри дива-экрана
...
Рейтинг: 0 / 0
19.05.2010, 14:31:05
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36636701
Иван Васильевичь
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Иван Васильевичь
Гость
Уже зарегился)))

Вот что я понял: нужен яваскрипт. Сам писать, тем более, не умею, но идея есть (может и не новая). Надеюсь на вашу помощь. Если есть знающие дело отзовитесь.
...
Рейтинг: 0 / 0
19.05.2010, 14:37:22
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36636725
Иван Васильевичь
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Иван Васильевичь
Гость
krvsa
Где-то тут давали ссылку на пример следующего содержания...
- Есть ДИВ-экран, фиксированого размера с оверфлов=хидден
- В нем есть ДИВ-контейнер, в нем все картинки
- при нажатии на кнопки управления, выполняется скролирование дива-контейнера внутри дива-экрана

ВОТ-ВОТ, НА ЭТОМ МЕСТЕ ПОПОДРОБНЕЕ, ПОЖАЛУЙСТА.
...
Рейтинг: 0 / 0
19.05.2010, 14:40:56
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36636956
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Иван Васильевичь , так чего подробнее-то? Нужно ссылку ту искать здесь - там все расписано "от" и "до".
...
Рейтинг: 0 / 0
19.05.2010, 15:35:08
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36636986
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Вот например идейка прикольная ...
...
Рейтинг: 0 / 0
19.05.2010, 15:41:10
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36637002
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Вобщем в поисковике много всего на эту тему ...
...
Рейтинг: 0 / 0
19.05.2010, 15:45:10
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36637667
Иван Васильевичь
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Иван Васильевичь
Гость
krvsaВобщем в поисковике много всего на эту тему ...
Опять битая ссылка.

И не нужен мне сейчас этот jQuery. С ним мне ещё возиться. с офсайта плагин не устанавливается, зачем мне он такой????
...
Рейтинг: 0 / 0
19.05.2010, 19:45:29
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36637741
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Иван ВасильевичьОпять битая ссылка.
У меня открылась. Как и та, что давали тебе выше...
...
Рейтинг: 0 / 0
19.05.2010, 20:25:44
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36637871
Фотография mahoune
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mahoune
Участник
Вот-вот, и jQuery у него не ставится, а так сразу избавился бы от кросбраузерных проблем.
...
Рейтинг: 0 / 0
19.05.2010, 21:40:09
| Ответить | Цитировать | Написать  
Плавный переход между картинками - JS
    #36638245
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
mahoune , так дело даже не в jQuery... Там описана сама идея "прокрутки", а на чем её реализовывать уже дело "третье".
...
Рейтинг: 0 / 0
20.05.2010, 08:35:22
| Ответить | Цитировать | Написать  
64 сообщений из 64, показаны все 3 страниц
  все  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Плавный переход между картинками - JS
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?all=1&fid=22&tid=1453074]:
 0ms
get settings:
 11ms
get forum list:
 9ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 220ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 90ms
get tp. blocked users:
 2ms
others: 268ms
total:  622ms
созд. / загр.: 622ms
x
x
Закрыть


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