javascript - 在javascript中的div之间旋转

Question

我正在尝试创建一个包含 3 个 div 的 slider ，当我单击一个按钮时，它会将最左边的 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 的快速“n”解决方案:

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

最好还是使用无数轮播中的一种，因为它们也会为您提供漂亮的动画。