object.style.position
Привет,
пример закинул в планкер: 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);
};
|
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>
|
спасибо за решение, но я не понял почему так :D
во-первых почему не работает polosa.style.right, ну и во-вторых я так понял полоска двигается от-512 до 0, при нажатии кнопки right - она сразу сдвигается в конец, и получается двигается с конца в право. update:сделал
if (left > 512) {
left = 0;
}
Теперь двигаются вправо, наверно проблема тут в том что они не по кругу идут, ну да ладно. Вопрос почему style.right не работает. |
shoopik,
потому что обьект не может быть в двух местах одновременно и left имеет приоритет над right. |
Цитата:
|
| Часовой пояс GMT +3, время: 23:30. |