Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.12.2011, 11:58
Интересующийся
Отправить личное сообщение для bogong Посмотреть профиль Найти все сообщения от bogong
 
Регистрация: 13.10.2011
Сообщений: 24

Помогите разобраться ... Я новенький в 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;

Буду благодарен за помощь ...
Ответить с цитированием
  #2 (permalink)  
Старый 26.12.2011, 12:03
Аватар для B@rmaley.e><e
⊞ Развернуть
Отправить личное сообщение для B@rmaley.e><e Посмотреть профиль Найти все сообщения от B@rmaley.e><e
 
Регистрация: 11.01.2010
Сообщений: 1,810

Обработчики событий по-умолчанию не блокируют действий по-умолчанию (вроде перехода по ссылке). Поэтому в Вашем случае сначала произойдёт вызов обработчика, а потом (сразу же) переход по ссылке.
Добавьте return false в конец соответствующих функций для отмены стандартного действия.
Ответить с цитированием
  #3 (permalink)  
Старый 26.12.2011, 12:08
Интересующийся
Отправить личное сообщение для bogong Посмотреть профиль Найти все сообщения от bogong
 
Регистрация: 13.10.2011
Сообщений: 24

Не помогло почему-то ..., вставил в конец каждой из функций 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;
}
Ответить с цитированием
  #4 (permalink)  
Старый 26.12.2011, 12:14
Аватар для B@rmaley.e><e
⊞ Развернуть
Отправить личное сообщение для B@rmaley.e><e Посмотреть профиль Найти все сообщения от B@rmaley.e><e
 
Регистрация: 11.01.2010
Сообщений: 1,810

Ой, да: вставлять нужно в конец обработчиков в коде
<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>
Ответить с цитированием
  #5 (permalink)  
Старый 26.12.2011, 12:22
Интересующийся
Отправить личное сообщение для bogong Посмотреть профиль Найти все сообщения от bogong
 
Регистрация: 13.10.2011
Сообщений: 24

Огромное спасибо ... А можно сказать из-за чего это все у меня произошло??? Что почитать по JS чтоб на такое не напарываться ...
Ответить с цитированием
  #6 (permalink)  
Старый 26.12.2011, 12:37
Аватар для B@rmaley.e><e
⊞ Развернуть
Отправить личное сообщение для B@rmaley.e><e Посмотреть профиль Найти все сообщения от B@rmaley.e><e
 
Регистрация: 11.01.2010
Сообщений: 1,810

Сообщение от bogong
А можно сказать из-за чего это все у меня произошло???
По той самой причине: обработчики событий не останавливают (без дополнительных телодвижений) действий по-умолчанию (вроде перехода по ссылке или отправки формы).
Сообщение от bogong
Что почитать по JS чтоб на такое не напарываться
Почитайте про события, там же можно почитать про JS в целом.
Ответить с цитированием
  #7 (permalink)  
Старый 26.12.2011, 12:44
Интересующийся
Отправить личное сообщение для bogong Посмотреть профиль Найти все сообщения от bogong
 
Регистрация: 13.10.2011
Сообщений: 24

Извините что пристаю к вам ... Другая напасть появилась ... При зацикливании картинок получается странная вещь ..., на моменте перехода дважды зависает на первой картинке, в массиве это ячейка 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;
Ответить с цитированием
  #8 (permalink)  
Старый 26.12.2011, 12:47
Интересующийся
Отправить личное сообщение для bogong Посмотреть профиль Найти все сообщения от bogong
 
Регистрация: 13.10.2011
Сообщений: 24

Или на последней если давить вперед ...,
Ответить с цитированием
  #9 (permalink)  
Старый 26.12.2011, 13:05
Аватар для B@rmaley.e><e
⊞ Развернуть
Отправить личное сообщение для B@rmaley.e><e Посмотреть профиль Найти все сообщения от B@rmaley.e><e
 
Регистрация: 11.01.2010
Сообщений: 1,810

А подумать? Вы ведь не обновляете картинку в случае обнуления счётчика.
Ответить с цитированием
  #10 (permalink)  
Старый 26.12.2011, 13:14
Аватар для GuardCat
Просто любитель
Отправить личное сообщение для GuardCat Посмотреть профиль Найти все сообщения от GuardCat
 
Регистрация: 13.09.2011
Сообщений: 300

Немного поменял код 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите разобраться с this Nigga2102 Элементы интерфейса 4 04.05.2011 18:28
Помогите разобраться со скриптом слайдшоу InviS jQuery 0 23.09.2010 14:47
помогите задать переменную в js bsgroupua Общие вопросы Javascript 3 01.02.2010 18:28
Помогите пожалуйста разобраться Kupu4 Ваши сайты и скрипты 0 21.01.2010 10:44
Помогите разобраться с галереей IMAGIN yana_studio Общие вопросы Javascript 4 12.12.2009 17:24