Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Реализовать карусельку (https://javascript.ru/forum/events/49416-realizovat-karuselku.html)

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

<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 ??? Подскажите пожалуйста

Viral 12.08.2014 15:51 
function next(){
  var box=document.getElementById('carusel');
  var leftnow = Number(box.style.left.replace('px',''));
  box.style.left = leftnow+100+"px";
};

WorM32 12.08.2014 16:05
Viral,
var leftnow = Number(box.style.left.replace('px',''))
проще делать так:
var leftnow = parseFloat(box.style.left);

Viral 12.08.2014 16:06
JrWorM32, ок) спасибо)

DynkanMaclaud 12.08.2014 20:03
Работает странно, поидее он должен прибавлять 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 чето не понял ниче(((( что мы делаем им??

рони 12.08.2014 23:39
Цитата:
Сообщение от DynkanMaclaud
я так понял в переменную leftnow, заносится число находящиеся в left
а у вас ничего нет в box.style поэтому и NaN все коды выше заработают если в style что-то будет -- но лучше читать доки
Цитата:
Свойство style позволяет читать эту информацию, но лишь ту, которая доступна напрямую из свойства/атрибута "style":
http://learn.javascript.ru/styles-and-classes

DynkanMaclaud 13.08.2014 00:25
Спасибо

Viral 13.08.2014 15:17
DynkanMaclaud,
var leftnow = Number(box.style.left.replace('px',''))


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

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


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