javascript - 在javascript中的div之间旋转

Question

我正在尝试创建一个具有 3 个 div 的滑块，当我单击一个按钮时，它会将最左边的 div 移出，并引入一个最初从右侧不可见的新 div。我想在不使用内容轮播的情况下做到这一点......

它在第一次单击时起作用，但在那之后，所有的 div 都混在一起了，并且不能正确地切换进出，有没有更好的方法来实现这一点？还是我的代码逻辑有问题？

演示

这也是我的代码：

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 的快速 'n' mucky 解决方案：

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

最好使用那里无数的旋转木马之一，因为它们也会为您提供漂亮的动画。