Помогите разобраться ... Я новенький в JS ...
Есть набор картинок, некое подобие галереи ...
Помогите разобраться что делаю не правильно ... Нужно чтоб при загрузке страницы из списка выбирался первый файл и потом вставлялся в хтмл ..., и при нажатии на вперед или назад вываливал следующую картинку ... Вместо этого он снова загружает эту же страницу со стартовыми параметрами ... <img src="" id="img"/> <br/> <a href="" onclick="javascript:nextImage()">Вперед</a> <a href="" onclick="javascript:previousImage()">Назад</a> var imageName=["001","002","003","004","005"]; var imageListLength=imageName.length; var counter=0; function pageInit(){ var obj=document.getElementById("img"); obj.src="../js/images/"+imageName[counter]+".png"; } function nextImage(){ var obj=document.getElementById("img"); if(counter>imageListLength){ counter=0; } else{ counter++; } obj.src="../js/images/"+imageName[counter]+".png"; } function previousImage(){ var obj=document.getElementById("img"); if(counter<0){ counter=imageListLength-1; } else{ counter--; } obj.src="../js/images/"+imageName[counter]+".png"; } window.onload=pageInit; Буду благодарен за помощь ... |
Обработчики событий по-умолчанию не блокируют действий по-умолчанию (вроде перехода по ссылке). Поэтому в Вашем случае сначала произойдёт вызов обработчика, а потом (сразу же) переход по ссылке.
Добавьте return false в конец соответствующих функций для отмены стандартного действия. |
Не помогло почему-то ..., вставил в конец каждой из функций return false; ... Эффект тот же самый ... Простите за глупость вопросов ..., я новенький ... Может не туда ставил?
function previousImage(){ var obj=document.getElementById("img"); if(counter<0){ counter=imageListLength-1; } else{ counter--; } obj.src="../js/images/"+imageName[counter]+".png"; return false; } |
Ой, да: вставлять нужно в конец обработчиков в коде
<img src="" id="img"/> <br/> <a href="" onclick="nextImage(); return false">Вперед</a> <a href="" onclick="previousImage(); return false">Назад</a> <script> var imageName=["http://javascript.ru/forum/images/smilies/mad.gif","http://javascript.ru/forum/images/smilies/sad.gif","http://javascript.ru/forum/images/smilies/dance3.gif","http://javascript.ru/forum/images/smilies/cray.gif","http://javascript.ru/forum/images/smilies/write.gif"]; var imageListLength=imageName.length; var counter=0; function pageInit(){ var obj=document.getElementById("img"); obj.src=imageName[counter]; } function nextImage(){ var obj=document.getElementById("img"); if(counter>imageListLength){ counter=0; } else{ counter++; } obj.src=imageName[counter]; } function previousImage(){ var obj=document.getElementById("img"); if(counter<0){ counter=imageListLength-1; } else{ counter--; } obj.src=imageName[counter]; } window.onload=pageInit; </script> |
Огромное спасибо ... А можно сказать из-за чего это все у меня произошло??? Что почитать по JS чтоб на такое не напарываться ...
|
Цитата:
Цитата:
|
Извините что пристаю к вам ... Другая напасть появилась ... При зацикливании картинок получается странная вещь ..., на моменте перехода дважды зависает на первой картинке, в массиве это ячейка 0 ...
var imageName=["001","002","003","004","005"]; var imageListLength=imageName.length; var counter=0; function pageInit(){ var obj=document.getElementById("img"); obj.src="../js/images/"+imageName[counter]+".png"; } function nextImage(){ var obj=document.getElementById("img"); counter++; if(counter>=imageListLength){ counter=0; } else{ obj.src="../js/images/"+imageName[counter]+".png"; } } function previousImage(){ var obj=document.getElementById("img"); counter--; if(counter<0){ counter=imageListLength; } else{ obj.src="../js/images/"+imageName[counter]+".png"; } } window.onload=pageInit; |
Или на последней если давить вперед ...,
|
А подумать? Вы ведь не обновляете картинку в случае обнуления счётчика.
|
Немного поменял код B@rmaley.e><e. Где поменял, отмечено.
<img src="" id="img"/> <br/> <a href="" onclick="previousImage(); return false">Назад</a> <!-- поменял местами назад и вперёд. Из чувства справедливости --> <a href="" onclick="nextImage(); return false">Вперед</a> <span></span> <script> var imageName=["http://javascript.ru/forum/images/smilies/mad.gif","http://javascript.ru/forum/images/smilies/sad.gif","http://javascript.ru/forum/images/smilies/dance3.gif","http://javascript.ru/forum/images/smilies/cray.gif","http://javascript.ru/forum/images/smilies/write.gif"]; var imageListLength = imageName.length - 1; // Поменяли тут. var counter = 0; function pageInit(){ var obj=document.getElementById("img"); obj.src=imageName[counter]; } function nextImage(){ var obj=document.getElementById("img"); if(++counter > imageListLength){ // Поменяли тут. counter=0; } obj.src=imageName[counter]; } function previousImage(){ var obj=document.getElementById("img"); if(--counter < 0) { // Поменяли тут. counter = imageListLength - 1; } obj.src=imageName[counter]; } window.onload=pageInit; </script> |
Т.е.???
|
GuardCat, B@rmaley.e><e - огромное спасибо ... :))))))))))) Догнал!!! :))))
|
bogong, вам B@rmaley.e><e уже прозрачно намекнул. Давайте я вам намекну прозрачнее и кодом:
Ваш вариант function previousImage(){ var obj=document.getElementById("img"); counter--; if(counter<0){ counter=imageListLength; // Ага. А картинку мы менять не будем в этот раз. } else{ obj.src="../js/images/"+imageName[counter]+".png"; // Вот тут вы меняете картинку } } Другой вариант function previousImage(){ var obj=document.getElementById("img"); counter--; if(counter<0){ counter=imageListLength; } obj.src="../js/images/"+imageName[counter]+".png"; // Теперь картинка меняется по-любому } |
B@rmaley.e><e , GuardCat - огромное спасибо ..., разобрался ... :)))
Воюю дальше с кодом :))) Усложняю скрипт ... :))) Простите за глупые вопросы ..., новичок я в этом деле ... |
Немного скомпоновал или вариант три в одном ... :write: :)
<img src="" id="img"/> <br /> <a href="" onclick="Image(0); return false">Назад</a> <a href="" onclick="Image(1); return false">Вперед</a> <script> var Image = function () { var b = "mad.gif,sad.gif,dance3.gif,cray.gif,write.gif".split(","), a = 1, c = b.length, d = document.getElementById("img"); return function (e) { e ? a++ : a--; a %= c; 0 > a && (a += c); d.src = "http://javascript.ru/forum/images/smilies/" + b[a]; } }(); window.onload=Image(0); </script> |
рони, действительно здорово. Только один момент: если функция вызывается немедленно, её принято заключать в скобки. А так интрига — смотришь код, смотришь — ОП! Вызов =)
P.S. Но без скобок красивее (=. |
рони, прошу прощения, немного попаразитировал на Вашем коде)
<html> <head> <meta charset="utf-8"> <style type="text/css"> body { margin:15px; } </style> <script type="text/javascript"> var imgChanger = (function() { var x = [["mad.gif", "sad.gif", "dance3.gif", "cray.gif", "write.gif"], [0]]; return function(i) { switch(x[1][0] += i) { case -1: x[1][0] = x[0].length - 1; break; case x[0].length: x[1][0] = 0; } document.getElementById("img").src = "http://javascript.ru/forum/images/smilies/" + x[0][x[1][0]]; } })(); window.onload = function() { imgChanger(0); }; </script> </head> <body> <img src="" id="img"/> <br/> <a href="" onclick="imgChanger(-1);">Назад</a> <a href="" onclick="imgChanger(+1);">Вперед</a> </body> </html> p.s.: чуть накосячи, позже исправлю) |
nerv_,
и где return false? |
Ещё вариант ... :write: :)
<img src="" id="img"/> <br /> <a href="" onclick="Image(0); return false">Назад</a> <a href="" onclick="Image(1); return false">Вперед</a> <script> var Image = (function () { var b = "mad.gif,sad.gif,dance3.gif,cray.gif,write.gif".split(","), d = document.getElementById("img"); return function (e) { e ? b.push(b.shift()) : b.unshift(b.pop()); d.src = "http://javascript.ru/forum/images/smilies/" + b[0]; } })(); window.onload=Image(0); </script> |
Цитата:
<html> <head> <meta charset="utf-8"> <style type="text/css"> body { margin:15px; } </style> <script type="text/javascript"> var imgChanger = (function() { var j = 0, x = [["mad.gif", "sad.gif", "dance3.gif", "cray.gif", "write.gif"], ["http://javascript.ru/forum/images/smilies/"]]; return function(i) { switch(j += i) { case -1: j = x[0].length - 1; break; case x[0].length: j = 0; } document.getElementById("img").src = x[1][0] + x[0][j]; } })(); window.onload = function() { imgChanger(0); }; </script> </head> <body> <img src="" id="img"/> <br/> <a href="" onclick="imgChanger(-1); return false">Назад</a> <a href="" onclick="imgChanger(+1); return false">Вперед</a> </body> </html> |
спрошу здесь, чтобы не создавать новую тему.
нулевой уровень в JS необходимо, чтобы по клику на элемент списка алертом выводилось сообщение |
<ul> <li onclick="alert('Ты кликнул!')">Кликни меня!</li> <li>Не кликай меня!</li> </ul> |
спасибо большое,
в Дэвид Флэнаган - "Javascript. Подробное руководство" не смог найти, все таки под 1000 стр, а по оглавлению даже не знал где конкретно |
elixir_42, попробуйте почитать тут:
learn.javascript.ru |
Часовой пояс GMT +3, время: 22:45. |