var content=document.getElementById('content');

    var length=$('#list li').length;

    var li_width=100;

    var scrollIndex=0

      $("#pre").click(function(){

        if((length-Math.abs(scrollIndex))*li_width>=content.clientWidth) scrollIndex--; 

        transform(scrollIndex,li_width)

      })

      $("#next").click(function(){

        if(scrollIndex<0) scrollIndex++;

        transform(scrollIndex,li_width)

      });

      function transform(index,dept){

        var ul =document.getElementById('list');

        if(typeof(ul.style['transform'])==="undefined"){

          ul.style.marginLeft=dept*index+'px'

        }

        else ul.style['transform']="translate3d("+dept*index+"px, 0px, 0px)";

      }