Скрипт уменьшения параметра left
Есть такая конструкция
<a href="#" class="first"></a> <a href="#" class="second"></a> <ul> <li></li> <li></li> ... </ul> Нужно написать скрипт, который, после клика по a.second, если количество li>8 и <=16 добавлял li стиль уменьшал left для li на 100%. Если li>16 и <=24 - ещё на 100%. То есть в самом начале имеется li{left: 0;}. Если элементов i 10(например) и мы кликаем по .second из left должно вычитаться 100%. При клике на prev - left увеличивается на 100%, пока не достигнет 0. У самого навыки в js чуть больше нуля. Прошу помочь |
ТЗ крайне странное, но я попробовал сделать:
<button class="first">First</button>
<button class="second">Second</button>
<ul id="list">
<li>item_1</li>
<li>item_2</li>
<li>item_3</li>
<li>item_4</li>
<li>item_5</li>
<li>item_6</li>
<li>item_7</li>
<li>item_8</li>
<li>item_9</li>
</ul>
<script>
var list = document.getElementById('list');
var first = document.querySelectorAll('.first')[0];
var second = document.querySelectorAll('.second')[0];
var childrens;
var max;
var oldValue;
second.onclick = function (e) {
if( list.children.length > 8 && list.children.length <= 16){
childrens = list.children;
max = childrens.length;
for (var i = 0; i < max; i++) {
oldValue = parseInt(childrens[i].style.marginLeft);
if(!oldValue){
oldValue = 0;
}
childrens[i].style.marginLeft = oldValue - 100 + '%';
}
}
else if( list.children.length > 16 && list.children.length < 24){
childrens = list.children;
max = childrens.length;
for (var j = 0; j < max; j++) {
oldValue = parseInt(childrens[j].style.marginLeft);
if(!oldValue){
oldValue = 0;
}
childrens[j].style.marginLeft = oldValue - 200 + '%';
}
}
};
first.onclick = function (e) {
childrens = list.children;
max = childrens.length;
for (var i = 0; i < max; i++) {
oldValue = parseInt(childrens[i].style.marginLeft);
if(!oldValue || oldValue === 0){
oldValue = 0;
return;
}
else{
childrens[i].style.marginLeft = oldValue + 100 + '%';
}
}
};
</script>
Правда я margin-left использовал, а не left. Если именно left надо, замените в коде все marginLeft на left. |
| Часовой пояс GMT +3, время: 14:20. |