Question

我正在组建一个快速的小状态板，显示活动和即将发布的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)

Answer 1

我不确定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);

这是一个快速回答，但希望你能抓住我的漂移。可能需要稍微玩一下：）

将多个li作为“幻灯片”返回

1 个答案: