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

这是小提琴

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

Answer 1

不是重新排列元素，而是检查是否存在next / prev元素，如果没有相应处理

$('.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();
    }
});

jsfiddle刚刚去世，但这应该有效。一旦jsfiddle回来，它就会告诉你小提琴。

修复了它：http://jsfiddle.net/arE2z/14/

Answer 2

我是否可以建议使用对象更好地构建它，以便将来可以更好地控制幻灯片？

在此处查看实时示例：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;
}

非常简单的幻灯片放映与前一个和下一个控件

2 个答案: