0

我正在整理一个快速的小状态板，显示活跃的和即将出现的 github 问题。

我将它们全部拉入并格式化为一个简单的列表，并找到了一个不错的 jQuery 插件，它可以像幻灯片一样循环播放每个项目。但是，要求它一次显示多个问题以更多地填满屏幕。

因此，在每张幻灯片上，它都会显示交换，例如一次显示 5 个 LI 项目而不是 1 个。然后交换以显示下一个 5，依此类推。

HTML

...
<ul id="issue-list">
  <li class="issue"></li>
    ...
  <li class="issue"></li>
</ul>
...
<script type="text/javascript">
    $(function() {
            $('#issue-list').swapmyli({
                swapTime: 900, // Speed of effect in animation
                transitionTime: 700, // Speed of Transition of ul (height transformation)
                time: 4000, // How long each slide will show
                timer: 1, // Show (1) /Hide (0) the timer. 
                css: 0 // Apply plugin css on the list elements.
            });
        });
</script>

JS

(function(e) {
    e.fn.swapmyli = function(t) {
        function s() {
            var e = i.parent().find(".timer span");

            e.animate({
                width: "100%"
            }, r);

            var n = i.find("li:first").outerHeight(true);
            i.find("li:first").fadeOut(120);

            i.animate({
                height: n
            }, t.transitionTime);

            i.find("li").hide();

            e.animate({
                width: "0%"
            }, 60);

            i.find("li:first").remove().appendTo(i).fadeIn(t.swapTime)
        }
        var n = {
            swapTime: 300,
            transitionTime: 900,
            time: 2e3,
            timer: 1,
            css: 1
        };

        var t = e.extend(n, t);
        var r = t.time - t.swapTime;
        var i = this;

        i.wrap('<div class="swapmyli clearfix"></div>');
        i.after('<div class="timer"><span></span></div><br class="clear" />');

        e(window).load(function() {
            var e = i.find("li:first").outerHeight(true);
            i.height(e);
            i.find("li").hide();
            s()
        });

        if (t.timer == 0) {
            i.parent().find(".timer").hide()
        }

        if (t.css == 0) {
            i.parent().addClass("nocss")
        }
        setInterval(s, t.time)
    }
})(jQuery)
4

1 回答 1

0

我不确定 outerHeight() 是否可以与slice一起正常工作，但您可以尝试更改这些行：

var n = i.find("li:first").outerHeight(true);
i.find("li:first").fadeOut(120);

到以下：

var n = i.find("li").slice(0, 4).outerHeight(true);
i.find("li").slice(0, 4).fadeOut(120);

这是一个快速的答案，但希望你能明白我的意思。可能需要玩一下它:)

于 2013-10-08T19:35:06.547 回答