jquery中的文本幻灯片显示

Question

基本上，我试图制作一个幻灯片，其中只有两个文本元素，一个是联系人编号，另一个是电子邮件id，必须在连续运行中更改。没有像onclick或onfocus这样的事件，这些元素应该垂直移动，而不是水平移动。

帮助。

Answer 1

可能已经有一个jQuery插件可以做你想要的事情，但这里有一个简单的概念，我在脑海中想出，你只需几行就可以实现。

将要滑动的东西作为div元素放入容器div中。将容器的高度设置为子div的高度，并隐藏溢出，这样只显示第一个子div；向上滑动第一个子项以隐藏它，并自动将下一个子项带入视图；将第一个子项移动到容器底部，并使其再次可见（尽管它实际上还不可见，因为它隐藏在容器底部下方）；永远重复。

你放了多少子div并不重要，因为代码只对当前的第一个做任何事情（所以我在这里只显示了联系人和电子邮件，但在我的工作演示中，我添加了一些额外的内容）。

<div id="slideContainer">
    <div>Contact No: 555-666-7777</div>
    <div>Email: [e-mail]</div>
</div>
<script>
$(function() {
    $("#slideContainer").css({
        "height" : $("#slideContainer div:first").css("height"),
        "overflow" : "hidden"
    });
    function slide() {
        $("#slideContainer div:first").slideUp(800, function() {
            var $this = $(this);
            $this.parent().append(this);
            $this.show();
            slide();
        });
    }
    slide();  
});
</script>

演示：http://jsfiddle.net/VFB3C/

同样，当我读到你的问题时，我也会想到这一点，但毫无疑问，你可以使用jQuery的动画方法和/或JavaScript的setTimeout()或setInterval()方法来做类似的事情。