Помогите разобраться ... Я новенький в 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> |
Часовой пояс GMT +3, время: 17:13. |