Javascript 带有上一个和下一个控件的非常简单的幻灯片放映

我正在尝试创建一个非常简单的幻灯片放映，其中包含一些非常基本的控件，如“上一页”和“下一页”。下一个似乎运行良好，但上一个显示出一些问题。当我点击前一个按钮时，在一个项目出现之前，容器会完全空白一段时间。我如何处理这个问题？这是我的

<ul class="container">
    <li class="item">One</li>
    <li class="item">Two</li>
    <li class="item">Three</li>
</ul>

<div class="prev">Prev</div>
<div class="next">Next</div>

这是小提琴

---

我不是重新排列元素，而是检查是否存在下一个/上一个元素，如果不存在，则相应地处理它

$('.item').hide();
$('.item:eq(0)').show();
setInterval(function () {
    $('.next').click();
}, 3000);

$('.next').click(function(){
    var $visible = $('.item:visible'); 
    if ($visible.next().length) $visible.hide().next().show();
    else {
        $visible.hide();
        $('.item').first().show();
    }
});

$('.prev').click(function(){
    var $visible = $('.item:visible'); 
    if ($visible.prev().length) $visible.hide().prev().show();
    else {
        $visible.hide();
        $('.item').last().show();
    }
});

JSFIDLE刚刚去世，但这应该行得通。 我一回来就给你看小提琴

---

修复了它：

我可以建议用一个对象更好地构造它吗，这样将来您就可以更好地控制幻灯片放映了

请查看此处的实时示例：

JS：

var slideShow = {
    i: 0,
    next: function() {
        this.i++;
        if(this.i === this.max()) {
            this.i = 0;
        };
        this.reset();
        this.goTo(this.i);
    },
    prev: function() {
        if(this.i === 0) {
            this.i = this.max();
        };
        this.i--;
        this.reset();
        this.goTo(this.i);
    },
    goTo: function(i) {
        $('.item').eq(i).addClass('active');
    },
    init: function() {
        setInterval(function() {
            slideShow.next();
        }, 3000);
    },
    reset: function() {
        $('.item').removeClass('active');
    },
    max: function() {
        return $('.item').length;
    }

};

slideShow.init();

$('.next').click(function(){
    slideShow.next();
});

$('.prev').click(function(){
    slideShow.prev();
});

CSS：

.container{
    height:200px;
    width:200px;
    background:beige;
}
.item {
    display: none;
    font-size:60px;
    list-style:none;
}
.item.active {
    display: block;
}

---

@阿尔瓦罗——感谢editI播放了大约15分钟，无法缩小问题的范围。顺便说一句，jQuery Cycle插件非常适合幻灯片（）。你可能想看看，也许是个主意。由于可见元素As成为列表的第一个元素，prev（）与任何元素都不匹配。也许瞄准最后一个李将是解决方案的一部分，所以，引导旋转木马。我也玩了一场，我不确定。您也可以在普通js中尝试下一个/上一个兄弟姐妹。若要添加到伊甸园，可能需要保存一个电流以用作上一个电流。@Guy--谢谢您的指导。这是有道理的。是的，js小提琴刚刚死了。@seth——这太棒了。@soum，很高兴我能帮你。

.container{
    height:200px;
    width:200px;
    background:beige;
}
.item {
    display: none;
    font-size:60px;
    list-style:none;
}
.item.active {
    display: block;
}