Помогите разобраться ... Я новенький в JS ...

[bogong]

Есть набор картинок, некое подобие галереи ...
Помогите разобраться что делаю не правильно ...
Нужно чтоб при загрузке страницы из списка выбирался первый файл и потом вставлялся в хтмл ..., и при нажатии на вперед или назад вываливал следующую картинку ... Вместо этого он снова загружает эту же страницу со стартовыми параметрами ...

<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;

Буду благодарен за помощь ...

[B@rmaley.e><e]

Обработчики событий по-умолчанию не блокируют действий по-умолчанию (вроде перехода по ссылке). Поэтому в Вашем случае сначала произойдёт вызов обработчика, а потом (сразу же) переход по ссылке.
Добавьте return false в конец соответствующих функций для отмены стандартного действия.

[bogong]

Не помогло почему-то ..., вставил в конец каждой из функций 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;
}

[B@rmaley.e><e]

Ой, да: вставлять нужно в конец обработчиков в коде

<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>

[bogong]

Огромное спасибо ... А можно сказать из-за чего это все у меня произошло??? Что почитать по JS чтоб на такое не напарываться ...

[B@rmaley.e><e]

А можно сказать из-за чего это все у меня произошло???

По той самой причине: обработчики событий не останавливают (без дополнительных телодвижений) действий по-умолчанию (вроде перехода по ссылке или отправки формы).

Что почитать по JS чтоб на такое не напарываться

Почитайте про события, там же можно почитать про JS в целом.

[bogong]

Извините что пристаю к вам ... Другая напасть появилась ... При зацикливании картинок получается странная вещь ..., на моменте перехода дважды зависает на первой картинке, в массиве это ячейка 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;

[bogong]

Или на последней если давить вперед ...,

[B@rmaley.e><e]

А подумать? Вы ведь не обновляете картинку в случае обнуления счётчика.

[GuardCat]

Немного поменял код 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>