Как сделать меняющееся картинку на сайте


R4z0R
Member
Откуда:
Сообщений: 173
Есть папка с 3 фотками, как разместить на странице динамическую фотку, которая бы показывала фотки из этой папки (можно жестко прописать их чтобы не париться со сканированием директории) поочередно с затуханием? Т.е есть текст с фоткой, на которой показалась одна фотка, погасла, появилась вторая, с затуханием исчезла, появилась третья и так по кругу. Где-то видел такой код на jscript, выглядел просто, но теперь не могу найти Ex_Soft
Member
Откуда:
Сообщений: 7715
тынць
_________________
"Helo, word!" - 17 errors 56 warnings

меняющееся Posted via ActualForum NNTP Server 1.4

R4z0R
Member
Откуда:
Сообщений: 173
нашел вот такой вариант - все супер, но почему-то в начале показа нет картинки, а потом все ок, идет показ с 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> Ex_Soft
Member
Откуда:
Сообщений: 7715
R4z0R
почему-то в начале показа нет картинки <img id="im" src="" />
_________________
"Helo, word!" - 17 errors 56 warnings

Posted via ActualForum NNTP Server 1.4

R4z0R
Member
Откуда:
Сообщений: 173
блин, точно. Спасибо R4z0R
Member
Откуда:
Сообщений: 173
Нашел с эффектом fade-in и fade-out: <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 :( Ex_Soft
Member
Откуда:
Сообщений: 7715
Не ленитесь Картинка с другого сайта.: тынць -> тынць (как вариант Картинка с другого сайта. )
_________________
"Helo, word!" - 17 errors 56 warnings

Posted via ActualForum NNTP Server 1.4

Ex_Soft
Member
Откуда:
Сообщений: 7715
P.S. BTW,
R4z0R
работает только в IE <img style='filter:alpha(opacity="+i_strngth+")'
/me думает: не мудрено...
_________________
"Helo, word!" - 17 errors 56 warnings

Posted via ActualForum NNTP Server 1.4

R4z0R
Member
Откуда:
Сообщений: 173
Ex_Soft
Не ленитесь Картинка с другого сайта.: тынць -> тынць (как вариант Картинка с другого сайта. )
_________________
"Helo, word!" - 17 errors 56 warnings
не заметил что по второй ссылке правленый вариант. Я такой же код привел, только мой вариант корявый, а по второму тынцу работает во всех браузерах. Сенкс R4z0R
Member
Откуда:
Сообщений: 173
не пойму, где меняется время отображения самой фотки между переходами? Ткните носом плз: 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> Ex_Soft
Member
Откуда:
Сообщений: 7715
R4z0R
время
тынць
_________________
"Helo, word!" - 17 errors 56 warnings

Posted via ActualForum NNTP Server 1.4

R4z0R
Member
Откуда:
Сообщений: 173
Ex_Soft
R4z0R
время
тынць
_________________
"Helo, word!" - 17 errors 56 warnings
да я понял что менять нужно timer=setInterval("showimage()",100); timer=setInterval("hideimage()",100); но получается только: смена картинки->нужная пауза->и медленное затухание R4z0R
Member
Откуда:
Сообщений: 173
нужно вот такой же эффект Ex_Soft
Member
Откуда:
Сообщений: 7715
Все, что необходимо чтобы добиться Вашей хотелки Вам уже, IMHO, приподнесли. Или включайте моск или сюда.
_________________
"Helo, word!" - 17 errors 56 warnings

Posted via ActualForum NNTP Server 1.4

ShSerge
Member
Откуда: ʚонɔ dиw
Сообщений: 24702
Ладно уж: <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="+opac100+")"; 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="+opac100+")"; } </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> ShSerge
Member
Откуда: ʚонɔ dиw
Сообщений: 24702
ПС.
Собственно параметр в nextimg() не используется. На всякий случай написал. R4z0R
Member
Откуда:
Сообщений: 173
ShSerge ПС.
Собственно параметр в nextimg() не используется. На всякий случай написал.
Спасибо за помощь, но пока был в поиске - не увидел ответ. То что как раз доктор прописал - нашел тут 2Константин
Guest автор нашел вот такой вариант - все супер, но почему-то в начале показа нет картинки, а потом все ок, идет показ с 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 изображения.

Между сообщениями интервал более 1 года.
Rezzz
Guest подскажите, пожалуйста!
если у меня папка с десятками картинок, как изменить код чтобы не прописывать названия всех картинок. а просто чтоб случайную выбирал из папки. картинки названы image1.jpg... image100.jpg krvsa
Member
Откуда: г Волжский
Сообщений: 13000
Rezzz, если есть серверный язык (например csp) все делается просто <img src='img/image#($r(100)\1+1)#.jpg' /> Между сообщениями интервал более 1 года.
Виктор_Орен
Guest у меня после картинки которая находится в "<img id="im" src="" />" появляется значек "нет картинки" с адресом "http://localhost/index.php/undefined" а потом он сменяется первой картинкой из массива.
В чем может быть проблема? Програмёр
Member
Откуда: Москва
Сообщений: 2962
Виктор_Орен у меня после картинки которая находится в "<img id="im" src="" />" появляется значек "нет картинки" с адресом "http://localhost/index.php/undefined" а потом он сменяется первой картинкой из массива.
В чем может быть проблема?

в том, что значение переменной устанавливается уже после первого обращения к ней. (если я правильно понял)
Больше ничего сказать невозможно, тут не экстрасенсы ;)

Виктор_Орен
Guest Програмёр в том, что значение переменной устанавливается уже после первого обращения к ней. (если я правильно понял)
Больше ничего сказать невозможно, тут не экстрасенсы ;)

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

Програмёр
Member
Откуда: Москва
Сообщений: 2962
Виктор_Орен Програмёр в том, что значение переменной устанавливается уже после первого обращения к ней. (если я правильно понял)
Больше ничего сказать невозможно, тут не экстрасенсы ;)

Выяснил, что переменная 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).

Regul001
Member
Откуда:
Сообщений: 1
2Константин,
+ к вопросу, как? Виртуальные форумы   Темы из всех форумов за 3 дня   Мои избранные форумы Использование СУБД   Microsoft SQL Server   Firebird, InterBase   Oracle   Microsoft Access   IBM DB2, WebSphere, IMS, U2, etc   MySQL   PostgreSQL   OLAP и DWH   Sybase ASA, ASE, IQ   Informix   Другие СУБД   FoxPro, Visual FoxPro   Caché, Ensemble, DeepSee, MiniM, IRIS, GT.M   SQLite   NoSQL, Big Data Дискуcсии   Сравнение СУБД   Проектирование БД   Работа   ERP и учетные системы   Разработка информационных систем   Тестирование и QA   Отчетные системы   Просто треп   Наши за рубежом   Сертификация и обучение   Hardware   Управление процессом разработки ИС   Юридические вопросы в ИТ Microsoft.NET   WinForms,.Net Framework   ASP.NET   ADO.NET, LINQ, Entity Framework, NHibernate, DAL, ORM   WPF, Silverlight   WCF, Web Services, Remoting Программирование   Delphi   C++   Visual Basic   Программирование   Java   Разработка под мобильные платформы   PowerBuilder   Microsoft Office   SharePoint   XML, XSL, XPath, XQuery Web Технологии   PHP, Perl, Python   HTML, JavaScript, VBScript, CSS Администрирование ОС   Windows   Unix-системы   Другие: Mac OS, PalmOS, BeOS, PocketPC SQL.RU   Обсуждение нашего сайта   Вопрос-Ответ   Test
Источник: http://www.sql.ru/forum/682755/jscript-menyaushhiesya-kartinki



Рекомендуем посмотреть ещё:


Закрыть ... [X]

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


Как сделать меняющееся картинку на сайте Как сделать меняющееся картинку на сайте Как сделать меняющееся картинку на сайте Как сделать меняющееся картинку на сайте Как сделать меняющееся картинку на сайте Как сделать меняющееся картинку на сайте Как сделать меняющееся картинку на сайте Как сделать меняющееся картинку на сайте