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

Question

我正在尝试创建一个非常简单的幻灯片放映，其中包含一些非常基本的控件，例如上一个和后一个。下一个似乎工作正常，但上一个显示出一些问题。当我点击前一个时，容器在出现项目之前会变得完全空白一段时间。我该如何处理这个问题？这是我所拥有的

<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:gt(0)').hide();
setInterval(function () {
    $('.item').eq(0).hide()
        .next('.item').show()
        .end().appendTo('.container');
}, 3000);

$('.next').click(function(){
    $('.item:visible').hide().next().show()
    .end().appendTo('.container');
});

$('.prev').click(function(){
    $('.item:visible').hide().prev().show()
    .end().appendTo('.container');
});

这是 fiddle

http://jsfiddle.net/sghoush1/arE2z/5/

Answer 1

我可以建议用一个对象更好地构造它，以便您将来可以更好地控制幻灯片吗？

查看此处的实时示例:jsFiddle

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;
}