Форум

Grizzly BlackBear · #1 (**permalink**) 25.10.2010, 21:36

доброго времени суток, форумчане
обращаюсь тут за помощью в первый раз

с java знаком совсем недавно
с jquery ну уж совсем недавно
делаю галерею, чтоб картинки сменялись с эффектами fadein и fadeout

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

мне нужно, чтоб gal_1_1 пропала, а после этого сразу же появилась gal_1_2
и далее 1_2 - 1_3
1_3 - 1_4
1_4 - 1_5
1_5 - 1_1
и по кругу

вот код

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<script src="jquery-1.4.2.js" type="text/javascript"></script>

</head>
<script language="JavaScript">

var timer = 0;

function UpdatePicture1() {

var objImg = 11;

if(objImg=11)
{$('img.img11').fadeOut('slow');
$('img.img12').fadeIn('slow');
objImg=12;
}
else
{if(objImg=12)
{$('img.img12').fadeOut('slow');
objImg=13;
$('img.img13').fadeIn('slow');
}
else
{if(objImg=13)
{$('img.img13').fadeOut('slow');
objImg=14;
$('img.img14').fadeIn('slow');
}
else
{if(objImg=14)
{$('img.img14').fadeOut('slow');
objImg=15;
$('img.img15').fadeIn('slow');
}
else
{$('img.img15').fadeOut('slow');
objImg=11;
$('img.img11').fadeIn('slow');}}}}

timer = setTimeout("UpdatePicture1()", 2000);

}

function Start() {
timer = setTimeout("UpdatePicture1()", 2000);
}

</script>

<body style="margin: 0; padding: 0;" onload="Start()">

<img src="pic/gal_1_1.jpg" class="img11" style="filter:alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; ">
<img src="pic/gal_1_2.jpg" class="img12" style="filter:alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; ">
<img src="pic/gal_1_3.jpg" class="img13" style="filter:alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; ">
<img src="pic/gal_1_4.jpg" class="img14" style="filter:alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0;">
<img src="pic/gal_1_5.jpg" class="img15" style="filter:alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; ">

</body>
</html >

P.S. блин, простите, название темы не по правилам оформил, поздно заметил

Grizzly BlackBear · #2 (**permalink**) 26.10.2010, 10:58

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

по моему, косяк в функции Start, но вот как надо?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<script src="jquery-1.4.2.js" type="text/javascript"></script>

<script language="JavaScript">
  function Start() 
    {$('img.img11').fadeOut('slow');
    $('img.img12').fadeIn('slow');
    }
</script>

</head>
<body>
<button onclick="Start()">start</button>
<img src="pic/gal_1_1.jpg" id="img11" style="filter:alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; ">
<img src="pic/gal_1_2.jpg" id="img12" style="filter:alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; ">
</body>
</html>

Grizzly BlackBear · #3 (**permalink**) 26.10.2010, 14:22

все, разобрался, заставил работать

только один момент остался непонятен
при подмене атрибута "src" в картинке, если страница была прокручена, то есть первая картинка в столбце находится хотя бы частично за пределами окна, то в момент подмены атрибута src страница скроллится до первой картинки, то есть почти в начало

странно, попробовал сейчас оставить на странице только механизм смены картинки с fadein и fadeout плюс добавил строк для того, чтоб страница прокручивалась, так страницу не скроллит больше, странно, почему? Может потому, что на моей странице картинка находится в таблице?

Grizzly BlackBear · #4 (**permalink**) 26.10.2010, 14:32

точно, вынес картинки из таблицы и перестало кидать

блин, такое ощущение, что я тут сам с собой разговариваю

Grizzly BlackBear · #5 (**permalink**) 26.10.2010, 17:38

тема закрыта

Форум

Справочник

Discord чат

Курсы javascript