[Sigizmund2012]

ТЗ крайне странное, но я попробовал сделать:

<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.