Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript
Перезагрузить страницу

Помогите со скриптом смены картинок


Помогите со скриптом смены картинок

Обсуждение темы Помогите со скриптом смены картинок в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; На многих форумах тема уже избита до неприличия конечно. Но там нет ни одного толкового ясного объяснения Вот нашел скрипт, а инструкция к ...


Закрытая тема
 
Опции темы
Старый 06.02.2009, 09:46   #1
На многих форумах тема уже избита до неприличия конечно. Но там нет ни одного толкового ясного объяснения

Вот нашел скрипт, а инструкция к нему путанная и непонятная (ну для меня покрайней мере). Написано скрипт меняет картинки через заданный интервал времени плавно.

Бился бися так и не смог понять что где редактировать и что куда ставить.

Объясните пожайлуста. Получается нужно сам скрипт ставить между тегами <head>...</head>. Скрипту прописать где картинки лежат и их имена.
В том месте где картинка ставить код указывающий на то что картинки выдает скрипт или они там-то.

Сам понял вроде что конкретно надо, а разобраться знаний не хватает

Код скрипта:
Код HTML:
<style>
#slide-container {
text-align:center;
margin:20px 0px;
}
#slide-container #slideshow {
width:400;
height:300px;
margin:auto;
position:relative;
}
#slide-container #slideshow IMG {
position:absolute;
top:0;
left:0;
}
</style>

<script>
function animate(tagId,alfa,step){
div = document.getElementById(tagId);
var items = new Array();
//Выбираем все рисунки слайдшоу
for(c=i=0;i<div.childNodes.length;i++){
if (div.childNodes[i].tagName=="IMG"){
items[c] = div.childNodes[i];
c++;
}
}
last = items[items.length-1];
next = items[items.length-2];
//делаем верхний в стопке(текущий) рисунок более прозрачным
last.style.opacity= alfa/100;
last.style.filter= "progid:DXImageTransform.Microsoft.Alpha(opacity="+alfa+")";
last.style.filter= "alpha(opacity="+alfa+")";

if ((alfa-step)>0){
//если еще не достигли полной прозрачности верхнего рисунка - продолжаем анимацию
setTimeout("animate('"+tagId+"',"+(alfa-step)+","+step+");",50);
}else{
//если достигли полной прозрачности верхнего рисунка
//делаем абсолютно непрозрачным следующий рисунок
next.style.opacity= 1;
next.style.filter= "progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
next.style.filter= "alpha(opacity=100)";
// а верхний рисунок перемещаем в низ стопки
tmp = last;
div.removeChild(last);
div.insertBefore(tmp,items[0]);
tmp.style.opacity= 1;
tmp.style.filter= "progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
tmp.style.filter= "alpha(opacity=100)";

setTimeout( "slideSwitch('"+tagId+"',1000)", 8000 );
}
}
//эта функция делает видимым блок с рисунками для слайдшоу (изначально он невидим, чтобы избежать мерцания во время загрузки картинок) и запускает анимацию
function slideSwitch(tagId,speed){
div = document.getElementById('slideshow');
if (div.style.visibility!="visible"){
div.style.visibility = "visible";
}
items = div.getElementsByTagName('img');
if (items.length>0){
animate(tagId,100,10);
}
}
//выжидаем пару секунд, чтобы картинки успели загрузиться... можно просто поставить на onload-событие последнего из рисунков
setTimeout( "slideSwitch('slideshow',1000);",2000 );
</script>

На место картинок я так понял вот это вставлять надо:
Код HTML:
<div id="slide-container"> 
<div id="slideshow">  
<img src="..."/>  <img src="..."/>  ...  <img src="..."/> 
</div></div>
Добавлено через 24 минуты

или дайте что нибудь попроще. Есть панель под 3 баннера, надо чтобы картинки менялись периодически и можно было интервал времени менять.

Добавлено через 1 час 41 минуту

Блин уже начинаю думать что проще гиф поставить
Последний раз редактировалось kost; 06.02.2009 в 14:01.. Причина: Добавлено сообщение
 
Старый 06.02.2009, 09:46
Ссылки
Старый 06.02.2009, 12:00   #2
А собственно все работает. Не вижу проблемы. Вот такой код сделал:
Код HTML:
<html>
<head>
<style>
#slide-container {
text-align:center;
margin:20px 0px;
}
#slide-container #slideshow {
width:400;
height:300px;
margin:auto;
position:relative;
}
#slide-container #slideshow IMG {
position:absolute;
top:0;
left:0;
}
</style>

<script>
function animate(tagId,alfa,step){
div = document.getElementById(tagId);
var items = new Array();
//Выбираем все рисунки слайдшоу
for(c=i=0;i<div.childNodes.length;i++){
if (div.childNodes[i].tagName=="IMG"){
items[c] = div.childNodes[i];
c++;
}
}
last = items[items.length-1];
next = items[items.length-2];
//делаем верхний в стопке(текущий) рисунок более прозрачным
last.style.opacity= alfa/100;
last.style.filter= "progid:DXImageTransform.Microsoft.Alpha(opacity="+alfa+")";
last.style.filter= "alpha(opacity="+alfa+")";

if ((alfa-step)>0){
//если еще не достигли полной прозрачности верхнего рисунка - продолжаем анимацию
setTimeout("animate('"+tagId+"',"+(alfa-step)+","+step+");",50);
}else{
//если достигли полной прозрачности верхнего рисунка
//делаем абсолютно непрозрачным следующий рисунок
next.style.opacity= 1;
next.style.filter= "progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
next.style.filter= "alpha(opacity=100)";
// а верхний рисунок перемещаем в низ стопки
tmp = last;
div.removeChild(last);
div.insertBefore(tmp,items[0]);
tmp.style.opacity= 1;
tmp.style.filter= "progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
tmp.style.filter= "alpha(opacity=100)";

setTimeout( "slideSwitch('"+tagId+"',1000)", 1000 );
}
}
//эта функция делает видимым блок с рисунками для слайдшоу (изначально он невидим, чтобы избежать мерцания во время загрузки картинок) и запускает анимацию
function slideSwitch(tagId,speed){
div = document.getElementById('slideshow');
if (div.style.visibility!="visible"){
div.style.visibility = "visible";
}
items = div.getElementsByTagName('img');
if (items.length>0){
animate(tagId,100,10);
}
}
//выжидаем пару секунд, чтобы картинки успели загрузиться... можно просто поставить на onload-событие последнего из рисунков
setTimeout( "slideSwitch('slideshow',1000);",2000 );
</script>
</head>
<body>
<div id="slide-container"> <div id="slideshow">
	<img src="1.gif"/>
	<img src="2.gif"/>
	<img src="3.gif"/>
	<img src="4.gif"/>
	<img src="5.gif"/>
	<img src="6.gif"/>
</div></div>
</body>
</html>
Проблема только в том, что для этого кода картинки не должны содержать прозрачности и должны быть одного размера.
 
Этот пользователь сказал спасибо Scroll за это полезное сообщение:
volFernion (07.02.2009)
Старый 10.02.2009, 02:19   #3
Одно слайдшоу работает. Когда прописываю два уже все не пашет. Делаю все по инструкции к скрипту и никак не врублуюсь где косяк

Код HTML:
<html>
<head>
<style>
#slide-container1,
#slide-container2 {
text-align:center;
margin:20px 0px;
}
#slide-container1 #slideshow1,
#slide-container2 #slideshow2 {
width:200px;
height:200px;
margin:auto;
position:relative;
}
#slide-container1 #slideshow1 IMG,
#slide-container2 #slideshow2 IMG {
position:absolute;
top:0;
left:0;
}
</style>

<script>
function animate(tagId,alfa,step){
div = document.getElementById(tagId);
var items = new Array();

for(c=i=0;i<div.childNodes.length;i++){
if (div.childNodes[i].tagName=="IMG"){
items[c] = div.childNodes[i];
c++;
}
}
last = items[items.length-1];
next = items[items.length-2];

last.style.opacity= alfa/100;
last.style.filter= "progid:DXImageTransform.Microsoft.Alpha(opacity="+alfa+")";
last.style.filter= "alpha(opacity="+alfa+")";

if ((alfa-step)>0){

setTimeout("animate('"+tagId+"',"+(alfa-step)+","+step+");",50);
}else{

next.style.opacity= 1;
next.style.filter= "progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
next.style.filter= "alpha(opacity=100)";

tmp = last;
div.removeChild(last);
div.insertBefore(tmp,items[0]);
tmp.style.opacity= 1;
tmp.style.filter= "progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
tmp.style.filter= "alpha(opacity=100)";

setTimeout( "slideSwitch('"+tagId+"',1000)", 1000 );
}
}

function slideSwitch(tagId,speed){
div = document.getElementById('slideshow');
if (div.style.visibility!="visible"){
div.style.visibility = "visible";
}
items = div.getElementsByTagName('img');
if (items.length>0){
animate(tagId,100,10);
}
}

setTimeout( "slideSwitch('slideshow1',1000);",2000 );
setTimeout( "slideSwitch('slideshow2',2000);",2000 );
</script>
</head>
<body>
<div id="slide-container1"> <div id="slideshow1">
	<img src="1.gif"/>
	<img src="2.gif"/>
</div></div>

<div id="slide-container2"> <div id="slideshow2">
<img src="3.gif"/>
<img src="4.gif"/>
</div>
</div>

</body>
</html>
 
Старый 10.02.2009, 09:38   #4
Выучите матчасть, чтоли...
 
Старый 10.02.2009, 09:48   #5
ну спасибо. Что еще сказать
 
Старый 10.02.2009, 09:48
Закрытая тема

« Выпадающие меню! | Закачка нескольких каталогов »



Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите с php скриптом maks96 ASP, Perl, PHP и MySQL 4 12.05.2012 00:13
Помогите со скриптом M@ksimus ASP, Perl, PHP и MySQL 1 26.01.2012 17:10
Помогите со скриптом PHP cool_jin ASP, Perl, PHP и MySQL 1 03.11.2009 18:07
Помогите со скриптом...... candy_man ASP, Perl, PHP и MySQL 7 28.11.2003 02:18
Помогите со скриптом Silver ASP, Perl, PHP и MySQL 0 16.04.2003 04:58


Текущее время: 00:26. Часовой пояс GMT +4.



Справка - Обратная связь - Web-silver.ru - Архив - Календарь - Карта - Вверх

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Дизайнерский форум