Jquery循环:将兄弟姐妹迭代四次,然后从头开始重新开始

时间:2014-01-16 00:54:32

标签: javascript jquery html css

问:如何创建一个循环,以便在div时显示四个#reviewswidget?幻灯片播放结束后,它需要返回前四个div。

<div id="reviewswidget">
    <div class="reviewtitle">title 1 goes here</div>
    <div class="reviewrating">rating 1 goes here</div>
    <div class="reviewreview"> review 1 goes here</div>
    <div class="reviewauthor">author 1 goes here</div>
    <div class="reviewtitle">title 2 goes here</div>
    <div class="reviewrating">rating 2 goes here</div>
    <div class="reviewreview"> review 2 goes here</div>
    <div class="reviewauthor">author 2 goes here</div>
</div>

我的尝试:

jQuery(function () {
        jQuery('#reviewswidget div').hide().slice(0, 4).show();
        setInterval(function () {
            jQuery('#reviewswidget div').filter(':visible').fadeOut(function () {
                self.setSliceIteration(4);
                self.setSliceTotal(jQuery('#reviewswidget div').length);
                if (self.getSlice() === 0 && self.getSlice() === '') {
                    jQuery('#reviewswidget div').hide().nextAll().slice(self.getSlice()).show();
                    self.setSlice(self.getSliceIteration() + self.getSlice());             
                }
                if (self.getSlice() < self.getSliceTotal()) {
                    $(this).nextAll().slice(self.getSlice()).show();
                    self.setSlice(self.getSliceIteration() + self.getSlice());
                }
                if (self.getSlice() < self.getSliceTotal()) {                   
                }
            });
        }, 3000);
    });

完整代码: http://jsfiddle.net/Q3jaf/1/

1 个答案:

答案 0 :(得分:0)

尝试

var $chidlren = $('#reviewswidget').children().slice(4).hide();
setInterval(function(){
    $('#reviewswidget').children().slice(0, 4).hide().appendTo('#reviewswidget')
    $('#reviewswidget').children().slice(0, 4).show()
}, 1000)

演示:Fiddle