<script>
window.onload = function () {
var oPrev = document.querySelector('.prev');
var oNext = document.querySelector('.next');
var aLi = document.querySelectorAll('li');
var aClass = [];
var bOk = false;
for (var i = 0; i < aLi.length; i++) {
aClass.push(aLi[i].className);
}
oPrev.onclick = function () {
if (bOk)return;
bOk = true;
aClass.push(aClass.shift());
change();
};
oNext.onclick = function () {
if (bOk)return;
bOk = true;
aClass.unshift(aClass.pop());
change();
};
function change() {
for (var i = 0; i < aLi.length; i++) {
aLi[i].className = aClass[i];
}
//判断运动结束
var oCur = document.querySelector('.cur');
function transEnd() {
oCur.removeEventListener('transitionend', transEnd, false);
bOk = false;
}
oCur.addEventListener('transitionend', transEnd, false);
}
};
</script>
<body>
<input type="button" value="←" class="prev"/>
<input type="button" value="→" class="next"/>
<ul>
<li class="l2">0</li>
<li class="l1">1</li>
<li class="cur">2</li>
<li class="r1">3</li>
<li class="r2">4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
