Скрипт уменьшения параметра 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, время: 06:07. |