фотоальбом с помощью Java Script

Смол · 31.08.2007, 11:44

Помогите,пожалуйста.Не пойму почему не работает.Заранее спасибо!

<html>
<head>
<title>Слайд-шоу</title>

<script language = "JavaScript">

numimg=0
imgslide=new Array ()
imgslide[0]=new Image ()
imgslide[1]=new Image ()
imgslide[2]=new Image ()
imgslide[3]=new Image ()
imgslide[4]=new Image ()
imgslide[5]=new Image ()
imgslide[6]=new Image ()
imgslide[7]=new Image ()

imgslide[0].src ="foto/Lipetsk/Lipetsk01.jpg"
imgslide[1].src ="foto/Lipetsk/Lipetsk02.jpg"
imgslide[2].src ="foto/Lipetsk/Lipetsk03.jpg"
imgslide[3].src ="foto/Lipetsk/Lipetsk04.jpg"
imgslide[4].src ="foto/Lipetsk/Lipetsk05.jpg"
imgslide[5].src ="foto/Lipetsk/Lipetsk06.jpg"
imgslide[6].src ="foto/Lipetsk/Lipetsk07.jpg"
imgslide[7].src ="foto/Lipetsk/Lipetsk08.jpg"

function dem(n)

{
if (n==1)
{ numimg++
if (numimg==8)
numimg=0;
}
else
{numimg--
if (numimg==-1)
numimg=7;
}
document.images[0].src=imgslide[numimg].src
}

</script>
</head>

<body>

<h1>Мой любимый город - Липецк</h1>

<img src = "foto/Lipetsk/Lipetsk01.jpg" width="480" height="320">

<form name=form1>
<input type=button value=Назад onClick="dem(0)">
<input type=button value=Вперед onClick="dem(1)">
</form>

Липецк - <br>
мой любимый город! <br>

</body>
</html>

pash · 29.09.2007, 12:36

Да вроде все работает.
Иногда бывает проблема из-за того ,что нет ; в конце строки, но и без точки с запятой все работает и в ИЕ и в Фоксе.

BamDaa · 04.01.2008, 14:44

Цитата:

Сообщение от Смол


	Помогите,пожалуйста.Не пойму почему не работает.Заранее спасибо! <html> <head> <title>Слайд-шоу</title> <script language = "JavaScript"> numimg=0 imgslide=new Array () imgslide[0]=new Image () imgslide[1]=new Image () imgslide[2]=new Image () imgslide[3]=new Image () imgslide[4]=new Image () imgslide[5]=new Image () imgslide[6]=new Image () imgslide[7]=new Image () imgslide[0].src ="foto/Lipetsk/Lipetsk01.jpg" imgslide[1].src ="foto/Lipetsk/Lipetsk02.jpg" imgslide[2].src ="foto/Lipetsk/Lipetsk03.jpg" imgslide[3].src ="foto/Lipetsk/Lipetsk04.jpg" imgslide[4].src ="foto/Lipetsk/Lipetsk05.jpg" imgslide[5].src ="foto/Lipetsk/Lipetsk06.jpg" imgslide[6].src ="foto/Lipetsk/Lipetsk07.jpg" imgslide[7].src ="foto/Lipetsk/Lipetsk08.jpg" function dem(n) { if (n==1) { numimg++ if (numimg==8) numimg=0; } else {numimg-- if (numimg==-1) numimg=7; } document.images[0].src=imgslide[numimg].src } </script> </head> <body> <h1>Мой любимый город - Липецк</h1> <img src = "foto/Lipetsk/Lipetsk01.jpg" width="480" height="320"> <form name=form1> <input type=button value=Назад onClick="dem(0)"> <input type=button value=Вперед onClick="dem(1)"> </form> Липецк - <br> мой любимый город! <br> </body> </html>

**********************************

<html>
<head>
<title>Слайд-шоу</title>

<script language = "JavaScript">

numimg=0
imgslide=new Array ()

imgslide[0] ="foto/Lipetsk/Lipetsk01.jpg";
imgslide[1] ="foto/Lipetsk/Lipetsk02.jpg";
imgslide[2] ="foto/Lipetsk/Lipetsk03.jpg";
imgslide[3] ="foto/Lipetsk/Lipetsk04.jpg";
imgslide[4] ="foto/Lipetsk/Lipetsk05.jpg";
imgslide[5] ="foto/Lipetsk/Lipetsk06.jpg";
imgslide[6] ="foto/Lipetsk/Lipetsk07.jpg";
imgslide[7] ="foto/Lipetsk/Lipetsk08.jpg";

function dem(n)

{
if (n==1)
{ numimg++
if (numimg==8)
numimg=0;
}
else
{numimg--
if (numimg==-1)
numimg=7;
}
document.getElementById('slideImage').src = imgslide[numimg];
}

</script>
</head>

<body>

<h1>Мой любимый город - Липецк</h1>
<form name=form1>
<img src = "foto/Lipetsk/Lipetsk01.jpg" width="480" height="320" id="slideImage">
<input type=button value=Назад onClick="dem(0)">
<input type=button value=Вперед onClick="dem(1)">
</form>

Липецк - <br>
мой любимый город! <br>

</body>
</html>

AlexeyVik · 07.01.2008, 17:55

А я нашол вот такой скрипт слайдшоу
Скрипт
Всё работает, но есть вопрос:
можно-ли и как вместо

img1 = new Image ()
img1.src = "1.gif"
img2 = new Image ()
img2.src = "2.gif"
img3 = new Image ()
img3.src = "3.gif"

написать цикл
Хорошо в примере 3 фото а если у меня 60?
Заранее спасибо за помощь.

czukowski · 07.01.2008, 18:37

AlexeyVik, можно, примерно так:

PHP код:


			
var num=0;
var imgs = new Array("image1.jpg", "image2.jpg", "image3.jpg");

потом немного исправленную функцию slideshow():

PHP код:


			
function slideshow()
{
    num++;
    if (num==imgs.length)num=0;
    document.animal.src=imgs[num];
}

Остальное не нужно.

Единственная разница, что картинки не будут загружаться заранее, а только после перехода на нее.

з.ы.: это только принцип, работает ли это в таком варианте, или надо будет внести мелкие поправки - не проверял

Более подробная информация: javascript Array

AlexeyVik · 07.01.2008, 19:02

Я думал примерно так
....
for (i=1; i<=55; i=i+1)
{
img+i = new Image ()
img+i.src = i+".gif"
}
....
но не работает

Добавлено через 4 минуты
czukowski, конечно спасибо, но я спрашивал о Java Script а ты предлагаеш PHP.
и всё равно необходимо перечислить все 60 фотографий

Цитата:

Сообщение от czukowski


	Array("image1.jpg","image2.jpg","image3.jpg");

czukowski · 07.01.2008, 23:29

AlexeyVik, там просто написано, что "код РНР", не верь всему, что пишут

Так, как ты думал, работать не будет, разве что вместо +i будешь писать [i], но перед этим тебе придется декларировать массив нужного размера. К тому же создавать 60 объектов Image... не знаю, может многовато будет...

Цитата:

Сообщение от AlexeyVik


	и всё равно необходимо перечислить все 60 фотографий

а как еще. Единственно - если они у тебя точно пронумерованы, то тогда можно в цикле img[i] = i+".gif". Но это, имхо, не гибко. Проще на стороне сервера прочитать из папки файлы и их список вложить в Array(...)

AlexeyVik · 08.01.2008, 20:24

czukowski, я пробовал так img[i] = i+".gif" но тоже не получилось.
Что касаемо количества так это не важно просто я пытаюсь 10-летнего сына немного приучить к этому делу и создаётся это ради тренировки. Следовательно тормознутость этого сайта не имеет значения.
А когда я начал разбираться в этом, мне тоже не захотелось перечислять все 60 штук, решил потратить время на поиск решения, чем на тупую работу.

Вобщем без помощи ничего не получается.
Если не трудно исправь эту часть кода так чтобы работало.
Ещё вопрос:
С помощью какого приложения можно отлаживать скрипт.

czukowski · 09.01.2008, 10:43

AlexeyVik, Если не перечислять сразу при декларировании, то нужно его сначала объявить как пустой массив нужного размера:

PHP код:


			
var img=new Array(60);

Тогда должно работать.

Для отладки я использую Firebug (дополнение к Firefox).

з.ы.: не думаю, что перечислять - это тупая работа, когда это можно сделать примерно так:

PHP код:


			
<?php
// теперь уже действительно php :)
// slideshow.php

// не вдаваясь в детали
foreach ($folder as $file)
{
   $images .= ($images == "" ? "" : ",") . $file;
}
?>
<script type="text/javascript">
...
var imgs = new Array(<?=$images?>);
// (и так далее)
...

И потом тебя уже не интересует, какой длины тебе понадобится массив и как там будут называться файлы.

AlexeyVik · 09.01.2008, 12:56

czukowski, спасибо, всётаки я добил это вот так

var img = new Array()

for(i=1; i<=60; i++)
{
img[i] = new Image();
img[i].src = i+".JPG";

}

и исправил строку
document.animal.src=eval("img["+num+"].src")
добавил []. Теперь всё работает.

czukowski · 09.01.2008, 19:29

AlexeyVik, а eval зачем?
Можно сразу document.animal.src=img[num].src;

AlexeyVik · 10.01.2008, 11:41

czukowski, если прочтёш пост №8, поймёш программирование не работа для меня, а хобби. Соответственно и опыт такой.
За Java Script взялся впервые. Почитал самоучитель http://jsp.newmail.ru/ , из этого примера мне непонравилось только то о чём я и спрашивал, над остальным даже не думал. А там вот такое пояснение

Цитата:


	Обратите внимание, что команда eval() преобразует img1.src в указание на источник изображения. Без нее это был бы простой набор букв.

Поделись знанием если это не так.

czukowski · 10.01.2008, 14:18

AlexeyVik, не то, чтобы это было совсем не так. Эта команда интерпретирует и выполняет код яваскрипт, набранный текстом. Действительно годится разве что в сложных случаях, когда требуется динамически управлять поведением программы, когда заранее неизвестно, что от нее потребуется

Если называть переменные img1, img2 итд, то тут без этого сложно обойтись, eval нужен для того чтобы "создать" название переменной, но это-то как раз тебе и не нравилось, что все они называются по-разному.

Сейчас переменная у тебя одна - массив. Остальные переменные в массиве легко найти по индексу (в квадратных скобках), т.е. использование eval тут будет лишним.

31.08.2007, 11:44	#1
Смол Неактивный пользователь Регистрация: 30.08.2007 Сообщений: 1 Репутация: 1	фотоальбом с помощью Java Script Помогите,пожалуйста.Не пойму почему не работает.Заранее спасибо! <html> <head> <title>Слайд-шоу</title> <script language = "JavaScript"> numimg=0 imgslide=new Array () imgslide[0]=new Image () imgslide[1]=new Image () imgslide[2]=new Image () imgslide[3]=new Image () imgslide[4]=new Image () imgslide[5]=new Image () imgslide[6]=new Image () imgslide[7]=new Image () imgslide[0].src ="foto/Lipetsk/Lipetsk01.jpg" imgslide[1].src ="foto/Lipetsk/Lipetsk02.jpg" imgslide[2].src ="foto/Lipetsk/Lipetsk03.jpg" imgslide[3].src ="foto/Lipetsk/Lipetsk04.jpg" imgslide[4].src ="foto/Lipetsk/Lipetsk05.jpg" imgslide[5].src ="foto/Lipetsk/Lipetsk06.jpg" imgslide[6].src ="foto/Lipetsk/Lipetsk07.jpg" imgslide[7].src ="foto/Lipetsk/Lipetsk08.jpg" function dem(n) { if (n==1) { numimg++ if (numimg==8) numimg=0; } else {numimg-- if (numimg==-1) numimg=7; } document.images[0].src=imgslide[numimg].src } </script> </head> <body> <h1>Мой любимый город - Липецк</h1> <img src = "foto/Lipetsk/Lipetsk01.jpg" width="480" height="320"> <form name=form1> <input type=button value=Назад onClick="dem(0)"> <input type=button value=Вперед onClick="dem(1)"> </form> Липецк - <br> мой любимый город! <br> </body> </html>

29.09.2007, 12:36	#2
pash Неактивный пользователь Пол: Регистрация: 11.03.2007 Сообщений: 7 Репутация: 5	Ответ: фотоальбом с помощью Java Script Да вроде все работает. Иногда бывает проблема из-за того ,что нет ; в конце строки, но и без точки с запятой все работает и в ИЕ и в Фоксе.

07.01.2008, 17:55	#4
AlexeyVik Постоялец Пол: Регистрация: 20.10.2006 Адрес: г. Москва Сообщений: 352 Репутация: 282	Ответ: фотоальбом с помощью Java Script А я нашол вот такой скрипт слайдшоу Скрипт <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> var num=1 img1 = new Image () img1.src = "1.gif" img2 = new Image () img2.src = "2.gif" img3 = new Image () img3.src = "3.gif" function slideshow() { num=num+1 if (num==4) {num=1} document.animal.src=eval("img"+num+".src") } </SCRIPT> </HEAD> <BODY> <CENTER> <IMG SRC="leo.gif" NAME="animal" BORDER=0> <p> <A HREF="JavaScript:slideshow()"> Щелкните, чтобы увидеть следующую картинку</A> </CENTER> </BODY> </HTML> Всё работает, но есть вопрос: можно-ли и как вместо img1 = new Image () img1.src = "1.gif" img2 = new Image () img2.src = "2.gif" img3 = new Image () img3.src = "3.gif" написать цикл Хорошо в примере 3 фото а если у меня 60? Заранее спасибо за помощь. __________________ Вежливость придумали для того - чтобы скрыть недостаток добра в человеческих отношениях.

07.01.2008, 18:37	#5
czukowski Постоялец Пол: Регистрация: 25.05.2007 Сообщений: 432 Репутация: 169	Ответ: фотоальбом с помощью Java Script AlexeyVik, можно, примерно так: PHP код: `var num=0; var imgs = new Array("image1.jpg", "image2.jpg", "image3.jpg");` потом немного исправленную функцию slideshow(): PHP код: `function slideshow() { num++; if (num==imgs.length)num=0; document.animal.src=imgs[num]; }` Остальное не нужно. Единственная разница, что картинки не будут загружаться заранее, а только после перехода на нее. з.ы.: это только принцип, работает ли это в таком варианте, или надо будет внести мелкие поправки - не проверял Более подробная информация: javascript Array

08.01.2008, 20:24	#8
AlexeyVik Постоялец Пол: Регистрация: 20.10.2006 Адрес: г. Москва Сообщений: 352 Репутация: 282	Ответ: фотоальбом с помощью Java Script czukowski, я пробовал так img[i] = i+".gif" но тоже не получилось. Что касаемо количества так это не важно просто я пытаюсь 10-летнего сына немного приучить к этому делу и создаётся это ради тренировки. Следовательно тормознутость этого сайта не имеет значения. А когда я начал разбираться в этом, мне тоже не захотелось перечислять все 60 штук, решил потратить время на поиск решения, чем на тупую работу. Вобщем без помощи ничего не получается. Если не трудно исправь эту часть кода так чтобы работало. Ещё вопрос: С помощью какого приложения можно отлаживать скрипт. __________________ Вежливость придумали для того - чтобы скрыть недостаток добра в человеческих отношениях.

09.01.2008, 10:43	#9
czukowski Постоялец Пол: Регистрация: 25.05.2007 Сообщений: 432 Репутация: 169	Ответ: фотоальбом с помощью Java Script AlexeyVik, Если не перечислять сразу при декларировании, то нужно его сначала объявить как пустой массив нужного размера: PHP код: `var img=new Array(60);` Тогда должно работать. Для отладки я использую Firebug (дополнение к Firefox). з.ы.: не думаю, что перечислять - это тупая работа, когда это можно сделать примерно так: PHP код: `<?php // теперь уже действительно php :) // slideshow.php // не вдаваясь в детали foreach ($folder as $file) { $images .= ($images == "" ? "" : ",") . $file; } ?> <script type="text/javascript"> ... var imgs = new Array(<?=$images?>); // (и так далее) ...` И потом тебя уже не интересует, какой длины тебе понадобится массив и как там будут называться файлы. Последний раз редактировалось czukowski; 09.01.2008 в 10:47..

09.01.2008, 12:56	#10
AlexeyVik Постоялец Пол: Регистрация: 20.10.2006 Адрес: г. Москва Сообщений: 352 Репутация: 282	Ответ: фотоальбом с помощью Java Script czukowski, спасибо, всётаки я добил это вот так var img = new Array() for(i=1; i<=60; i++) { img[i] = new Image(); img[i].src = i+".JPG"; } и исправил строку document.animal.src=eval("img["+num+"].src") добавил []. Теперь всё работает. __________________ Вежливость придумали для того - чтобы скрыть недостаток добра в человеческих отношениях.

09.01.2008, 19:29	#11
czukowski Постоялец Пол: Регистрация: 25.05.2007 Сообщений: 432 Репутация: 169	Ответ: фотоальбом с помощью Java Script AlexeyVik, а eval зачем? Можно сразу document.animal.src=img[num].src;

10.01.2008, 14:18	#13
czukowski Постоялец Пол: Регистрация: 25.05.2007 Сообщений: 432 Репутация: 169	Ответ: фотоальбом с помощью Java Script AlexeyVik, не то, чтобы это было совсем не так. Эта команда интерпретирует и выполняет код яваскрипт, набранный текстом. Действительно годится разве что в сложных случаях, когда требуется динамически управлять поведением программы, когда заранее неизвестно, что от нее потребуется Если называть переменные img1, img2 итд, то тут без этого сложно обойтись, eval нужен для того чтобы "создать" название переменной, но это-то как раз тебе и не нравилось, что все они называются по-разному. Сейчас переменная у тебя одна - массив. Остальные переменные в массиве легко найти по индексу (в квадратных скобках), т.е. использование eval тут будет лишним.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Галерея на Java Script.	Bim	Java Script	15	08.05.2011 22:35
Java Script на КПК	Hworang	КПК	6	06.05.2010 19:05
Локальный поиск на Java script	genyfild	Java Script	2	10.12.2009 15:59
Java-script collection	no_n@me	Java Script	2	10.10.2008 23:41
Как включить Java Script	Coyot	Microsoft Windows	10	30.12.2006 04:35