在javascript中在div之间旋转

Question

我正在尝试创建一个有3个div的滑块，当我点击一个按钮时，它会移动最左边的div，然后引入一个最初从右边看不到的新div。我想在不使用Content Carousel ...

的情况下这样做

它适用于第一次点击，但之后div会混淆并且不能正确切换，是否有更好的方法来实现它？或者我的代码中的逻辑有问题吗？

DEMO

这里也是我的代码：

function toggleDiv(total, idprefix) {
for (var i=1; i<total+1; i++) {
    var j = i-1;
    if (i==1) {
        document.getElementById(idprefix+i).id = 'last';
    } else if(i==total) {
        document.getElementById(idprefix+i).style.display = 'block';
        document.getElementById(idprefix+i).id = idprefix+j;
    } else {
        document.getElementById(idprefix+i).id = idprefix+j;
    }        
}

document.getElementById('last').style.display = 'none';
document.getElementById('last').id = idprefix+total;

}

Answer 1

使用jQuery的快速'笨拙的解决方案：

function toggleDiv() {
    $('.slider div:last').show();
    var $firstElement = $('.slider div:first').hide();
    $('.slider').append( $firstElement );
}       

最好使用其中一个无数的旋转木马，因为他们也会给你很好的动画。