powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Плавный переход между картинками - JS
25 сообщений из 64, страница 2 из 3
Плавный переход между картинками - JS
    #36203188
Фотография WYPMAH
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
ShSergeу тебя на странице не будет яваскриптового кода, который никогда не выполняется.
+100!

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

_______________
AnimeBay - аниме магазин, который Вас не разочарует.
...
Рейтинг: 0 / 0
Плавный переход между картинками - JS
    #36203572
arbin
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
И все-таки кто-нибудь подскажет как использовать скрипт для двух наборов картинок на одной странице?
...
Рейтинг: 0 / 0
Плавный переход между картинками - JS
    #36203615
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
arbinИ все-таки кто-нибудь подскажет как использовать скрипт для двух наборов картинок на одной странице?
В этом топике уже был ответ. Чем предложение illion не нравится?
...
Рейтинг: 0 / 0
Плавный переход между картинками - JS
    #36207993
arbin
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Этот скрипт выводит картинки в одном месте экрана, мне нужно в нескольких местах, т.е. 2 набора меняющихся картинок, например, в ячейках таблицы. Как позионировать несколько наборов, используя одну фукнцию?
...
Рейтинг: 0 / 0
Плавный переход между картинками - JS
    #36208287
Фотография mahoune
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Передавать функции объект где надо перерисовать картинку.

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

_______________
AnimeBay - аниме магазин, который Вас не разочарует.
...
Рейтинг: 0 / 0
Плавный переход между картинками - JS
    #36209426
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Яростный МечShSergeЯростный Меч...Идея, конечно, симпатичная, но новая ли? Есть ли в ней "научная новизна"?
Тьфу-ты. Назание надо поменять. Ламеры и тут опередили.
Может тогда Strong Javascript или ещё как? Аббревиатура SJS - не так уж и плохо, типа, моё имя, отчество и фамилия. Как насчет True JavaScript ? Вроде не распространеноjsЪ
Можно и трушный логотип из такой аббревиатуры запилить.))
...
Рейтинг: 0 / 0
Плавный переход между картинками - JS
    #36214097
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
Плавный переход между картинками - JS
    #36214893
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
Плавный переход между картинками - JS
    #36214976
Фотография 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
Плавный переход между картинками - JS
    #36216487
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
Плавный переход между картинками - JS
    #36216518
Фотография 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
Плавный переход между картинками - JS
    #36216589
arbin
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Да, в разных местах получилось расставить, но анимация прокручивается один раз, затем останавливается.
...
Рейтинг: 0 / 0
Плавный переход между картинками - JS
    #36216599
arbin
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
После следующих загрузок вообще нет анимации
...
Рейтинг: 0 / 0
Плавный переход между картинками - JS
    #36220529
arbin
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Кто-нибудь знает как сделать?
...
Рейтинг: 0 / 0
Плавный переход между картинками - JS
    #36239123
arbin
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Уважаемые Вебмастера!
Кто-нибудь может помочь в указанной проблеме?
Где illion, модератор данного направления форума?
Это же для вебмастера задача на 10 минут.
Если это платная услуга - сообщите цену.
...
Рейтинг: 0 / 0
Плавный переход между картинками - JS
    #36239145
Korcar
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
оч не охота разбирать функцию ... затолкай её вызов в setTimeout
...
Рейтинг: 0 / 0
Плавный переход между картинками - JS
    #36239383
Фотография WYPMAH
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
arbinДа, в разных местах получилось расставить, но анимация прокручивается один раз, затем останавливается.
arbinПосле следующих загрузок вообще нет анимации
значит что-то другое в это виновно, т.к. на чистой странице всё работает, как часы

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

_______________
AnimeBay - аниме магазин, который Вас не разочарует.
...
Рейтинг: 0 / 0
Плавный переход между картинками - JS
    #36240923
Фотография 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
Плавный переход между картинками - JS
    #36249922
arbin
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Illion, после того, как я указал размеры для картинок, они не находятся на одном месте.

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

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

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

Вот задача :) Сейчас и примера такого найти не могу. По моему это какой-то простейшый код, о котором уже давно забыли, через желание показаться красивее других. А сам повторюсь - чайник. Посылали на кучу плагинов, ни один решение не подсказал, все в "яву" прутся.
...
Рейтинг: 0 / 0
25 сообщений из 64, страница 2 из 3
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Плавный переход между картинками - JS
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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