Javascript.RU

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

Слайдер на JS
Пытаюсь сделать слайдер на JS. Есть код. Но не знаю как исправить баг: когда пролистнешь слайдер в одну сторону, а потом в другую, то на предыдущую позицию он не возвращается, а пролистывается дальше. Хелп)

<div class="spot" id="otkr2">&nbsp;
<div class="move" onclick="var list = document.getElementById('slider');  b = list.lastElementChild; list.insertBefore(b.previousElementSibling, list.children[0]);">
<p class="str">&lt;</p>
</div>

<div class="container">
<div class="slide" id="slider">
<div>text1</div>
<div>text2</div>
<div>text3</div>
<div>text4</div>
</div>
</div>

<div class="move" onclick="var list = document.getElementById('slider');  b = list.firstElementChild; list.insertBefore(b.nextElementSibling, list.children[0]);">
<p class="str">&gt;</p>
</div>
</div>
Ответить с цитированием
  #2 (permalink)  
Старый 24.10.2016, 11:45
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,830

kamlayka, оно?

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
function left(){
	var list = document.getElementById('slider');  
	list.appendChild(list.firstElementChild);
};
function right(){
	var list = document.getElementById('slider');  
	list.insertBefore(list.lastElementChild, list.firstElementChild);
};
</script>
</head>
<body>
<div class="spot" id="otkr2">&nbsp;
<div class="move" onclick="left()">
	<p class="str">&lt;</p>
</div>
<div class="container">
	<div class="slide" id="slider">
		<div>text1</div>
		<div>text2</div>
		<div>text3</div>
		<div>text4</div>
	</div>
</div>
<div class="move" onclick="right()">
	<p class="str">&gt;</p>
</div>
</div>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 24.10.2016, 11:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,981

kamlayka,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #slider{
    width: 200px;
    height: 100px;
    overflow: hidden;
    position: relative;
  }
  #slider > div{
    width: 200px;
    height: 100px;
    position: absolute;
    background-color:  #FFFFFF;
  }

  </style>

</head>

<body>
<div class="spot" id="otkr2">&nbsp;
<div class="move" onclick="var list = document.getElementById('slider'); list.insertBefore(list.lastElementChild,list.firstElementChild);">
<p class="str">&lt;</p>
</div>

<div class="container">
<div class="slide" id="slider">
<div>text1</div>
<div>text2</div>
<div>text3</div>
<div>text4</div>
</div>
</div>

<div class="move" onclick="var list = document.getElementById('slider'); list.appendChild(list.firstElementChild);">
<p class="str">&gt;</p>
</div>
</div>


</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 24.10.2016, 11:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,981

ksa,
Ответить с цитированием
  #5 (permalink)  
Старый 24.10.2016, 12:47
Новичок на форуме
Отправить личное сообщение для kamlayka Посмотреть профиль Найти все сообщения от kamlayka
 
Регистрация: 11.03.2016
Сообщений: 3

Благодарю, вы - мои герои))
Ответить с цитированием
  #6 (permalink)  
Старый 24.10.2016, 14:14
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,830

рони, я раньше тебя встаю.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
js стиль render для react.js vflash Ваши сайты и скрипты 5 01.04.2016 22:57
Вакансия JavaScript разработчик / JS / Frontend developer (Санкт-Петербург) Сергей Грачёв Работа 0 21.09.2015 12:31
JS Coaching для стартапа OlgaAyva Работа 12 27.09.2011 21:18
Картинка обрабатывается js 4yBaK Общие вопросы Javascript 10 11.09.2011 08:28
Срочно JS developer okp Работа 13 23.08.2011 15:16