2

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

<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/

4

2 回答 2

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;
}
于 2013-09-19T17:39:41.900 回答
1

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

$('.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/

于 2013-09-19T15:32:37.280 回答