Форум

shoopik · #1 (**permalink**) 22.07.2017, 18:31

Привет,
пример закинул в планкер: https://plnkr.co/edit/UQz3yiv2hAJfV5UVoqCu?p=preview

Слайдер, двигает картинки, влево - да, вправо - нет. Почему - вот вопрос. Вывожу в логи, значение style.right - меняется, не пойму че не двигает.
Еще интересует почему создаётся переменная left, почему если просто сделать polosa.style.left+= left+'px'; - то не работает

document.getElementById('slider-left').onclick = sliderLeft;
var left = 0;
function sliderLeft () {
	var poloska = document.getElementById('polosa');
	left = left - 128;
	if (left < -512) {
		left = 0;
	}
	polosa.style.left= left+'px';
};

document.getElementById('slider-right').onclick = sliderRight;
var right = 0;
function sliderRight () {
	var poloska = document.getElementById('polosa');
	right = right + 128;
	if (right > 512) {
		right = 0;
	}
	polosa.style.right = right+'px';
	console.log(polosa.style.right);
	console.log(polosa.style.left);
};

рони · #2 (**permalink**) 22.07.2017, 18:54

shoopik,

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  #slider {
    position: relative;
  }

  #polosa{
    position: absolute;
  }

  </style>

</head>
<body> <button id="slider-left">left</button>
  <button id="slider-right">right</button>
  <div id="slider">
    <div id="polosa">
      <img src="https://cdn0.iconfinder.com/data/icons/superhero-2/256/Spiderman-128.png" alt="">
      <img src="https://cdn0.iconfinder.com/data/icons/superhero-2/256/Robin-128.png" alt="">
      <img src="https://cdn0.iconfinder.com/data/icons/superhero-2/256/Captain_America-128.png" alt="">
      <img src="https://cdn4.iconfinder.com/data/icons/superhero/128/thepunisher.png" alt="">
      <img src="https://cdn0.iconfinder.com/data/icons/IS_hallowen_social/128/su_superman.png" alt="">
    </div>
  </div>




  <script>document.getElementById('slider-left').onclick = sliderLeft;
var left = 0;
function sliderLeft () {
  var poloska = document.getElementById('polosa');
  left = left - 128;
  if (left < -512) {
    left = 0;
  }
  polosa.style.left= left+'px';
};

document.getElementById('slider-right').onclick = sliderRight;

function sliderRight () {
  var poloska = document.getElementById('polosa');
  left = left + 128;
  if (left > 0) {
    left = -512;
  }
  polosa.style.left = left+'px';
};</script>
</body>
</html>

shoopik · #3 (**permalink**) 22.07.2017, 19:10

спасибо за решение, но я не понял почему так

во-первых почему не работает polosa.style.right,
ну и во-вторых я так понял полоска двигается от-512 до 0, при нажатии кнопки right - она сразу сдвигается в конец, и получается двигается с конца в право.

update:сделал

if (left > 512) {
    left = 0;
  }

Теперь двигаются вправо, наверно проблема тут в том что они не по кругу идут, ну да ладно. Вопрос почему style.right не работает.

рони · #4 (**permalink**) 22.07.2017, 20:15

shoopik,
потому что обьект не может быть в двух местах одновременно и left имеет приоритет над right.

shoopik · #5 (**permalink**) 22.07.2017, 20:19

Сообщение от рони

shoopik,
потому что обьект не может быть в двух местах одновременно и left имеет приоритет над right.

cпасибо

Форум

Справочник

Discord чат

Курсы javascript