jquery中的文本幻灯片显示

问题描述：

基本上我试图做一个滑动显示，其中只有两个文本元素，一个是联系号码。另一个是电子邮件ID，必须连续更改。没有像onclick或onfocus这样的事件，这些元素应该垂直移动而不是水平移动。jquery中的文本幻灯片显示

帮助。

你试过了什么？你可以发布你的代码吗？ – Unknown 2012-01-27 10:46:52

我尝试过使用onclick事件的JS，但我不希望它与onmouseover或on焦点上的任何事件一起完成。 – 2012-01-27 10:59:40

有没有像你需要显示body onload的要求？ – Unknown 2012-01-27 11:04:21

答

可能已经有一个jQuery插件完全符合你的要求，但这里有一些简单的东西，我把它作为一个概念，只需要几行就可以实现。

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

你放多少个孩子div并不重要，因为代码只对当前第一个孩子做任何事情（所以我在这里显示的只是联系方式和电子邮件，但在我的working demo我已经添加了一些额外的东西）。

<div id="slideContainer"> 
    <div>Contact No: 555-666-7777</div> 
    <div>Email: [email protected]</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's animation methods和/或JavaScript的setTimeout()或setInterval()方法类似。

jquery中的文本幻灯片显示

相关推荐