Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.08.2014, 15:34
Аватар для DynkanMaclaud
Профессор
Отправить личное сообщение для DynkanMaclaud Посмотреть профиль Найти все сообщения от DynkanMaclaud
 
Регистрация: 08.08.2014
Сообщений: 261

Реализовать карусельку
Решил я заморочиться и сделать каррусельку ( контейнер и кнопка (вперед)).

<div id="carusel">
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
	</div>
	
	<div id="next" onclick="next()">></div>
	
	
	
	
	</body>


Код:
#carusel{

width:2000px;

height:100px;

border:1px solid black;

position:absolute;

left:-1000px;


}


#next{

width:50px;

height:100px;

border:1px solid black;

position:absolute;

right:50px;

text-align:center;

}.box{

background-color:green;
width:200px; 
height:80px;
float:left;
var nextslide=document.getElementById('next');
		
		
		 function next(){
		var box=document.getElementById('carusel'),
			
		box.style.left=-1000+100+"px";
		
		
		
		
		
		
		
		
		};


Только вот не пойму как вместо '-1000' подставить значение left ??? Подскажите пожалуйста
Ответить с цитированием
  #2 (permalink)  
Старый 12.08.2014, 15:51
Аватар для Viral
Профессор
Отправить личное сообщение для Viral Посмотреть профиль Найти все сообщения от Viral
 
Регистрация: 26.04.2011
Сообщений: 472

function next(){
  var box=document.getElementById('carusel');
  var leftnow = Number(box.style.left.replace('px',''));
  box.style.left = leftnow+100+"px";
};
Ответить с цитированием
  #3 (permalink)  
Старый 12.08.2014, 16:05
Профессор
Отправить личное сообщение для WorM32 Посмотреть профиль Найти все сообщения от WorM32
 
Регистрация: 11.02.2014
Сообщений: 303

Viral,
var leftnow = Number(box.style.left.replace('px',''))
проще делать так:
var leftnow = parseFloat(box.style.left);
Ответить с цитированием
  #4 (permalink)  
Старый 12.08.2014, 16:06
Аватар для Viral
Профессор
Отправить личное сообщение для Viral Посмотреть профиль Найти все сообщения от Viral
 
Регистрация: 26.04.2011
Сообщений: 472

JrWorM32, ок) спасибо)
Ответить с цитированием
  #5 (permalink)  
Старый 12.08.2014, 20:03
Аватар для DynkanMaclaud
Профессор
Отправить личное сообщение для DynkanMaclaud Посмотреть профиль Найти все сообщения от DynkanMaclaud
 
Регистрация: 08.08.2014
Сообщений: 261

Работает странно, поидее он должен прибавлять 100 к значению что в left (-1000), тоесть клик -900 кдик -800 а он сразу left:100px; клик ;left 200((

а если использовать

function next(){
  var box=document.getElementById('carusel');
  var leftnow = parseFloat(box.style.left);

  box.style.left = leftnow+100+"px";
};


я так понял в переменную leftnow, заносится число находящиеся в left; поставвил
alert(leftnow)
вывел NaN , тоесть не работает(( должен же число вывести

Viral поясни с replace а то я читал на js чето не понял ниче(((( что мы делаем им??

Последний раз редактировалось DynkanMaclaud, 12.08.2014 в 20:10.
Ответить с цитированием
  #6 (permalink)  
Старый 12.08.2014, 23:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Сообщение от DynkanMaclaud
я так понял в переменную leftnow, заносится число находящиеся в left
а у вас ничего нет в box.style поэтому и NaN все коды выше заработают если в style что-то будет -- но лучше читать доки
Цитата:
Свойство style позволяет читать эту информацию, но лишь ту, которая доступна напрямую из свойства/атрибута "style":
http://learn.javascript.ru/styles-and-classes
Ответить с цитированием
  #7 (permalink)  
Старый 13.08.2014, 00:25
Аватар для DynkanMaclaud
Профессор
Отправить личное сообщение для DynkanMaclaud Посмотреть профиль Найти все сообщения от DynkanMaclaud
 
Регистрация: 08.08.2014
Сообщений: 261

Спасибо
Ответить с цитированием
  #8 (permalink)  
Старый 13.08.2014, 15:17
Аватар для Viral
Профессор
Отправить личное сообщение для Viral Посмотреть профиль Найти все сообщения от Viral
 
Регистрация: 26.04.2011
Сообщений: 472

DynkanMaclaud,
var leftnow = Number(box.style.left.replace('px',''))


str.replace(var1, var2) берет строку str, ищет в ней подстроку var1 (в нашем случае 'px') и заменяет ее на var2 (в нашем случае ни на что не заменяет, просто убирает, т.к. кавычки пустые)

но WorM32 тут прав, в этом случае правильнее использовать parseFloat, это я неуч не вспомнил про этот метод
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как реализовать отправку содержимого из iframe нажатием комбинации клавиш ctrl+enter Naizer Общие вопросы Javascript 4 27.11.2013 17:39
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
Помогите реализовать идею shilinpavel Элементы интерфейса 8 07.09.2011 11:14
Как реализовать.. PaperPlane Общие вопросы Javascript 17 15.11.2010 08:14
Как реализовать? Fliand Элементы интерфейса 4 22.08.2009 19:47