Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.04.2015, 15:48
Новичок на форуме
Отправить личное сообщение для 0nline Посмотреть профиль Найти все сообщения от 0nline
 
Регистрация: 08.04.2015
Сообщений: 3

Проблема со сменой z-Index
Задача такая: необходимо написать "слайдер", без использования css, jQuery. Я решил реализовать это с помощью смены z-index у блоков-элементов слайдера. Вроде всё верно написал, но слайдер не работает

html и css
<html>
	<head>
		<style type="text/css">
			div.slider {top: 100px;
							left: 100px}
			div.i {position: fixed;
					display: block;
					 width: 80%;
					 margin: 5% 10% 0 10%;
					 height: 30%}
			div.i img {width: 100%;
							height: 100%}
			div.description {color: white;
									 bottom: 0;
									 width: 100%;
									 background: rgb(0,0,0);
									 height: 30%;}
			div.decription p{margin: 10px}
			div.prev {position: fixed;
							left: 7%;
							top: 25%}
			div.next {position: fixed;
						   right: 7%;
						   top: 25%}
		</style>
		<script type="text/javascript" src="aslider.js"></script>
	</head>
	<body>
		<div class="prev"><a href="#" id="pr" onclick="viewdiv(this.id)">Back</a></div>
		<div>
			<div class="i" id="d0"><img src="1.jpg"><div class="description">1</div></div>
			<div class="i" id="d1"><img src="2.jpg"><div class="description">2</div></div>
			<div class="i" id="d2"><img src="3.jpg"><div class="description">3</div></div>
			<div class="i" id="d3"><img src="4.jpg"><div class="description">4</div></div>
			<div class="i" id="d4"><img src="5.jpg"><div class="description">5</div></div>
			<div class="i" id="d5"><img src="6.jpg"><div class="description">6</div></div>
			<div class="i" id="d6"><img src="7.jpg"><div class="description">7</div></div>
			<div class="i" id="d7"><img src="8.jpg"><div class="description">8</div></div>
			<div class="i" id="d8"><img src="9.jpg"><div class="description">9</div></div>
			<div class="i" id="d9"><img src="10.jpg"><div class="description">10</div></div>
			<div class="i" id="d10"><img src="11.jpeg"><div class="description">11</div></div>
			<div class="i" id="d11"><img src="12.jpg"><div class="description">12</div></div>
		</div>
		<div class="next"><a href="#"  id="ne" onclick="viewdiv(this.id)">Next</a></div>
	</body>
</hmtl>


Скрипт aslider.js
var i = 11;
var id;

function viewdiv(a) 
{
	if(a=="pr")
	{
		if(i==-1) i=11;
		i--;
		id = 'd'+i;
		el = document.getElementById(id);
		
		if(i==0)
		{
			el.style.zindex = "2";
			i = 12;
		}
		else el.style.zindex = "2"
	}
	else
	{
		if(i==12) i=0;
		i++
	    id='d'+i;
	    var el = document.getElementById(id);
				 
	    if(i==11) 
		{
			el.style.zindex="2";
			i=-1;
		}
	    else el.style.zindex="2";
	}
}
Ответить с цитированием
  #2 (permalink)  
Старый 08.04.2015, 16:23
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от 0nline
Вроде всё верно написал, но слайдер не работает
Значит:
- Не верно написал
- Идея не прошла
Ответить с цитированием
  #3 (permalink)  
Старый 08.04.2015, 16:40
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

0nline, упрощайте идею, то бишь скрипт, начиная с передачи в функцию не id кнопки, а направление, zIndex, и т.д.
Ответить с цитированием
  #4 (permalink)  
Старый 08.04.2015, 19:35
Новичок на форуме
Отправить личное сообщение для 0nline Посмотреть профиль Найти все сообщения от 0nline
 
Регистрация: 08.04.2015
Сообщений: 3

Отлично, а по существу есть что-то? Поконкретнее, в чём проблема?
Ответить с цитированием
  #5 (permalink)  
Старый 08.04.2015, 19:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,059

Слайдер без jquery
0nline,
<html>
	<head>
		<style type="text/css">
			div.slider {top: 100px;
							left: 100px}
			div.i {position: fixed;
					display: block;
					 width: 80%;
					 margin: 5% 10% 0 10%;
					 height: 30%}
			div.i img {width: 100%;
							height: 100%}
			div.description {color: white;
									 bottom: 0;
									 width: 100%;
									 background: rgb(0,0,0);
									 height: 30%;}
			div.decription p{margin: 10px}
			div.prev {position: fixed;
							left: 7%;
							top: 25%}
			div.next {position: fixed;
						   right: 7%;
						   top: 25%}
		</style>
		<script>
var i = 11;
var id, el;

function viewdiv(a)
{
    id = 'd'+i;
	el = document.getElementById(id);
    el.style.zIndex="1";
    i += a=="pr" ?  1 : -1;
    i==12 && (i = 0);
    i==-1 && (i = 11);
    id = 'd'+i;
	el = document.getElementById(id);
    el.style.zIndex="2";
}
</script>
	</head>
	<body>
		<div class="prev"><a href="#" id="pr" onclick="viewdiv(this.id);return false">Back</a></div>
		<div>
			<div class="i" id="d0"><img src="1.jpg"><div class="description">1</div></div>
			<div class="i" id="d1"><img src="2.jpg"><div class="description">2</div></div>
			<div class="i" id="d2"><img src="3.jpg"><div class="description">3</div></div>
			<div class="i" id="d3"><img src="4.jpg"><div class="description">4</div></div>
			<div class="i" id="d4"><img src="5.jpg"><div class="description">5</div></div>
			<div class="i" id="d5"><img src="6.jpg"><div class="description">6</div></div>
			<div class="i" id="d6"><img src="7.jpg"><div class="description">7</div></div>
			<div class="i" id="d7"><img src="8.jpg"><div class="description">8</div></div>
			<div class="i" id="d8"><img src="9.jpg"><div class="description">9</div></div>
			<div class="i" id="d9"><img src="10.jpg"><div class="description">10</div></div>
			<div class="i" id="d10"><img src="11.jpeg"><div class="description">11</div></div>
			<div class="i" id="d11"><img src="12.jpg"><div class="description">12</div></div>
		</div>
		<div class="next"><a href="#"  id="ne" onclick="viewdiv(this.id); return false">Next</a></div>
	</body>
</html>

Последний раз редактировалось рони, 08.04.2015 в 20:04.
Ответить с цитированием
  #6 (permalink)  
Старый 09.04.2015, 11:23
Новичок на форуме
Отправить личное сообщение для 0nline Посмотреть профиль Найти все сообщения от 0nline
 
Регистрация: 08.04.2015
Сообщений: 3

Спасибо большое, работает)
Буду разбираться теперь с кодом, кратко всё очень, в принципе, большую часть операторов я понял, спасибо. До JavaScript прогал на c++ поэтому пишу с большим количеством условий.
Ответить с цитированием
  #7 (permalink)  
Старый 10.04.2015, 18:48
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Сообщение от 0nline
без использования css
Странно, а я заметил там <style type="text/css">
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Разметка для Google closure compiler monolithed Оффтопик 11 04.09.2013 00:50
Подскажите как лучше положить .xml документ в базу Гробовщик Серверные языки и технологии 4 02.09.2013 11:15
Проблема с радио кнопками px379 Общие вопросы Javascript 8 29.07.2013 09:30
Проблема с заключение картинки в ссылку. Iktash Элементы интерфейса 6 14.12.2012 08:37
проблема со сменой изображений при наведение Jack Элементы интерфейса 0 19.03.2009 22:13