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

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Помогите разобраться ... Я новенький в JS ... (https://javascript.ru/forum/misc/24324-pomogite-razobratsya-ya-novenkijj-v-js.html)

bogong

26.12.2011 11:58

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

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

B@rmaley.e><e

26.12.2011 12:03

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

bogong

26.12.2011 12:08

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

26.12.2011 12:14

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

<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

26.12.2011 12:22

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

B@rmaley.e><e

26.12.2011 12:37

Цитата:

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

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

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

Цитата:

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

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

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

bogong

26.12.2011 12:44

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

26.12.2011 12:47

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

B@rmaley.e><e

26.12.2011 13:05

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

GuardCat

26.12.2011 13:14

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

bogong

26.12.2011 13:17

Т.е.???

bogong

26.12.2011 13:18

GuardCat, B@rmaley.e><e - огромное спасибо ... :))))))))))) Догнал!!! :))))

GuardCat

26.12.2011 13:21

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"; // Теперь картинка меняется по-любому
}

bogong

26.12.2011 13:54

B@rmaley.e><e , GuardCat - огромное спасибо ..., разобрался ... :)))
Воюю дальше с кодом :))) Усложняю скрипт ... :))) Простите за глупые вопросы ..., новичок я в этом деле ...

рони	26.12.2011 16:01

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

GuardCat

27.12.2011 09:52

рони, действительно здорово. Только один момент: если функция вызывается немедленно, её принято заключать в скобки. А так интрига — смотришь код, смотришь — ОП! Вызов =)

P.S. Но без скобок красивее (=.

nerv_

27.12.2011 15:41

рони, прошу прощения, немного попаразитировал на Вашем коде)

<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.: чуть накосячи, позже исправлю)

рони	27.12.2011 16:02

nerv_,
и где return false?

рони	27.12.2011 16:45

Ещё вариант ... :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>

nerv_

27.12.2011 18:40

Цитата:

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

и где return false?

Потерялся :D Спасибо за очередной пример! Вроде как и я сделал рабочий :)

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

elixir_42

27.12.2011 18:59

спрошу здесь, чтобы не создавать новую тему.
нулевой уровень в JS
необходимо, чтобы по клику на элемент списка алертом выводилось сообщение

trikadin

27.12.2011 19:08

<ul>
 <li onclick="alert('Ты кликнул!')">Кликни меня!</li>
 <li>Не кликай меня!</li>
</ul>

elixir_42

27.12.2011 19:17

спасибо большое,
в Дэвид Флэнаган - "Javascript. Подробное руководство" не смог найти, все таки под 1000 стр, а по оглавлению даже не знал где конкретно

trikadin

27.12.2011 19:20

elixir_42, попробуйте почитать тут:
learn.javascript.ru

Часовой пояс GMT +3, время: 19:36.