Форум Сайтостроение Веб-строительство

Нужна помощь! Как правильно прописать код

12
A8
На сайте с 09.05.2014
Offline
1
Alex8787
1081

Вот есть код (банер, картинки переключаются), проблема в том, что когда этот код один на сайте, все работает, но когда я поставил еще два таких кода (как ниже пример) т.е. разные картинки - в верху один код (одни картинки), ниже с боку справа еще один код (другие картинки), и ниже слева еще один код (другие картинки), но получается, что на сайте показывается только один банер с картинками, а не все три банера. Я надеюсь правильно описал проблему с кодом. Что нужно изменить во всех кодах,чтобы они все показывали на сайте ?

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test</title>

<script type="text/javascript">

var chet = 1;

window.onload = function () { setTimeout(frout, 4000); }

function frout() {

chet++;

if (chet>5) {chet=0;}

switch(chet) {

case 1:

document.getElementById('img').src = "изображение1"

break;

case 2:

document.getElementById('img').src = "изображение2";

break;

case 3:

document.getElementById('img').src = "изображение3";

break;

case 4:

document.getElementById('img').src = "изображение4";

break;

case 5:

document.getElementById('img').src = "изображение5";

break;

}

setTimeout(frout, 4000);

}

</script>

</head>

<body>

<p><img src="изображение1" onclick="frout();" id="img" alt="" /></p>

siv1987
На сайте с 02.04.2009
Offline
427
siv1987
#1

getElementById('img') - один элемент img id="img". Если элементов несколько, соответственно должны быть разные ид и несколько запросов к DOM для выбора этих элементов.

document.getElementById('img').src = "изображение5";

document.getElementById('img1').src = "изображение5";

document.getElementById('img2').src = "изображение5";

и тд.

<img src="изображение1" onclick="frout();" id="img" alt="" />

<img src="изображение1" onclick="frout();" id="img1" alt="" />

<img src="изображение1" onclick="frout();" id="img2" alt="" />

A8
На сайте с 09.05.2014
Offline
1
Alex8787
#2

Честно, пытаюсь понять и не понимаю, я самоучка, пожалуйста ты можешь прописать замену полностью на это:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test</title>

<script type="text/javascript">

var chet = 1;

window.onload = function () { setTimeout(frout, 4000); }

function frout() {

chet++;

if (chet>5) {chet=0;}

switch(chet) {

case 1:

document.getElementById('img').src = "изображение1"

break;

case 2:

document.getElementById('img').src = "изображение2";

break;

case 3:

document.getElementById('img').src = "изображение3";

break;

case 4:

document.getElementById('img').src = "изображение4";

break;

case 5:

document.getElementById('img').src = "изображение5";

break;

}

setTimeout(frout, 4000);

}

</script>

</head>

<body>

<p><img src="изображение1" onclick="frout();" id="img" alt="" /></p>

В втором и третьем коде я конечно указываю другие изображения (они по другом называются).

siv1987
На сайте с 02.04.2009
Offline
427
siv1987
#3

Не могу, ибо в этом коде я не знаю что нужно прописать не видя картину в целом. А что не понятного? Есть один баннер - один тег img с id 'img', есть несколько баннеров - значит несколько тегов img с разными id (по спецификации аттрибут id уникальное значение, других элементов с этим же id не может быть). Или я не правильно понял задачу? Тогда место id поменяйте на класс, и результат запрос в DOM вернет все объекты которые содержат этот класс.

Подскажите по docker-y кто Яндекс ддосит сайт. Что Как анализировать код страницы
A8
На сайте с 09.05.2014
Offline
1
Alex8787
#4

Я прописал ко второму банеру код, правильно? но у меня ничего не изменилось:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test</title>

<script type="text/javascript">

var chet = 1;

window.onload = function () { setTimeout(frout, 4000); }

function frout() {

chet++;

if (chet>11) {chet=0;}

switch(chet) {

case 1:

document.getElementById('img1').src = "изображение1"

break;

case 2:

document.getElementById('img2').src = "изображение2";

break;

case 3:

document.getElementById('img3').src = "изображение3";

break;

case 4:

document.getElementById('img4').src = "изображение4";

break;

case 5:

document.getElementById('img5').src = "изображение5";

break;

}

setTimeout(frout, 4000);

}

</script>

</head>

<body>

<p><img src="изображение1" onclick="frout();" id="img1" alt="" /></p>

siv1987
На сайте с 02.04.2009
Offline
427
siv1987
#5

ТС, не тупите, откуда в getElementById элементы с ид img2+, если у вашего img img1?

case 1:

document.getElementById('img1').src = "изображение1"

break;

case 2:

document.getElementById('img1').src = "изображение2";

break;

case 3:

document.getElementById('img1').src = "изображение3";

break;

case 4:

document.getElementById('img1').src = "изображение4";

break;

case 5:

document.getElementById('img1').src = "изображение5";

break;

A8
На сайте с 09.05.2014
Offline
1
Alex8787
#6

Вот как у меня все прописано на сайте:

1 код (банер)

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test</title>

<script type="text/javascript">

var chet = 1;

window.onload = function () { setTimeout(frout, 4000); }

function frout() {

chet++;

if (chet>11) {chet=0;}

switch(chet) {

case 1:

document.getElementById('img').src = "изображение1"

break;

case 2:

document.getElementById('img').src = "изображение2";

break;

case 3:

document.getElementById('img').src = "изображение3";

break;

case 4:

document.getElementById('img').src = "изображение4";

break;

case 5:

document.getElementById('img').src = "изображение5";

break;

}

setTimeout(frout, 4000);

}

</script>

</head>

<body>

<p><img src="изображение1" onclick="frout();" id="img1" alt="" /></p>

2 код (банер)

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test</title>

<script type="text/javascript">

var chet = 1;

window.onload = function () { setTimeout(frout, 4000); }

function frout() {

chet++;

if (chet>11) {chet=0;}

switch(chet) {

case 1:

document.getElementById('img').src = "рисунок1"

break;

case 2:

document.getElementById('img').src = "рисунок2";

break;

case 3:

document.getElementById('img').src = "рисунок3";

break;

case 4:

document.getElementById('img').src = "рисунок4";

break;

case 5:

document.getElementById('img').src = "рисунок5";

break;

}

setTimeout(frout, 4000);

}

</script>

</head>

<body>

<p><img src="рисунок1" onclick="frout();" id="img1" alt="" /></p>

3 код банер

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test</title>

<script type="text/javascript">

var chet = 1;

window.onload = function () { setTimeout(frout, 4000); }

function frout() {

chet++;

if (chet>11) {chet=0;}

switch(chet) {

case 1:

document.getElementById('img').src = "картинка1"

break;

case 2:

document.getElementById('img').src = "картинка2";

break;

case 3:

document.getElementById('img').src = "картинка3";

break;

case 4:

document.getElementById('img').src = "картинка4";

break;

case 5:

document.getElementById('img').src = "картинка5";

break;

}

setTimeout(frout, 4000);

}

</script>

</head>

<body>

<p><img src="картинка1" onclick="frout();" id="img1" alt="" /></p>

Но на сайте показывает только банер где - изображение (т.е. только 1 код - банер)

---------- Добавлено 14.05.2014 в 23:46 ----------

Где написано: if (chet>11) {chet=0;} (это ошибка, у меня написано if (chet>5) {chet=0;}

---------- Добавлено 14.05.2014 в 23:46 ----------

Где написано: if (chet>11) {chet=0;} (это ошибка, у меня написано if (chet>5) {chet=0;}

siv1987
На сайте с 02.04.2009
Offline
427
siv1987
#7
Alex8787:
Вот как у меня все прописано на сайте:

И это все на одной странице?

Объясните что это вообще за херня? Баннер должен меняться при клике на изображение? Или это ротатор?

A8
На сайте с 09.05.2014
Offline
1
Alex8787
#8

Нет, это все в hnml коде, но все три кода расположены в разных местах главной страницы: 1 код в верху, второй код в низу слева, третий код внизу справа.

---------- Добавлено 15.05.2014 в 00:07 ----------

Все три банера - это разные изображения, они меняются автоматически каждые 4 секунды. Вернее только верхний банер меняется каждые 4 секунды, а остальные два банера просто не показываются.

---------- Добавлено 15.05.2014 в 00:11 ----------

Для меня все это очень сложно, но я пытаюсьь, поэтому так и туплю.

siv1987
На сайте с 02.04.2009
Offline
427
siv1987
#9 


<script>

window.onload = function(){

	setInterval(frout, 4000);

}

function frout() {

	var imgs = ['image1', 'image2', 'image3', 'image4'];

	var ids  = ['img', 'img1', 'img2'];



	for(var i=0; i<ids.length; i++){

		var id = ids;

		var elem = document.getElementById(id);

		if(elem){

			var attr = elem.getAttribute('data-id') || 0;

			if(attr >= imgs.length){

				attr = 0;

			}

			

			elem.src = imgs[attr];

			elem.setAttribute('data-id', ++attr);

		}

	}

}

</script>

<!-- banner1 -->

<p><img src="image" id="img" onclick="frout()"></p>



<!-- banner2 -->

<p><img src="image" id="img1" onclick="frout()"></p>



<!-- banner3 -->

<p><img src="image" id="img2" onclick="frout()"></p>

['image1', 'image2', 'image3', 'image4'] - здесь прописать адреса к картинкам

['img', 'img1', 'img2'] - здесь id элементов баннеров (пожалуйста, прочтите что такое аттрибут id)

Если и сейчас не дойдет, то вам придется выучить основы html.

A8
На сайте с 09.05.2014
Offline
1
Alex8787
#10

Увы, но ничего у меня не получается. Может есть простой код, чтобы картинки просто менялись ?

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий