作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试想出一种方法来实现某些文本的幻灯片效果,本质上它会自动启动并显示第一个 h4 元素,而不是淡出并淡入下一个,等等所有 h4 元素,一旦它到达最后一个它应该再次重复。
测试的示例标记是
<div id="slideshow">
<h4 class="slideshow-element">Test 1</h4>
<h4 class="slideshow-element">Test 2</h4>
<h4 class="slideshow-element">Test 3</h4>
<h4 class="slideshow-element">Test 4</h4>
</div>
其中 h4 基本上相互重叠并且最初是隐藏的。如果知道除了淡入和淡出之外如何添加更多 css 属性以实现各种效果,也将是一件很好的事情。我知道有一些插件可以执行此操作,但我想要一个特定的轻量级解决方案,该解决方案可以处理任意数量的 h4 元素。
到目前为止,我想出了一个让它循环的方法,我在其中定义了一个函数,该函数负责添加各种效果,一旦完成,它就会再次调用自身。我想我可以使用类添加到 h4 元素以将样式应用于它们,也许还可以进行转换?
最佳答案
这是 JQuery:
jQuery(document).ready(function(){
$(function(){
$('#slideshow h4:gt(0)').hide();
setInterval(function(){
$('#slideshow :first-child').fadeOut(2000)
.next('h4').fadeIn(2000)
.end().appendTo('#slideshow');},
2000);
});
});
它的基本功能是淡出幻灯片放映的第一个子元素,淡入下一个子元素,然后将第一个子元素附加到 h4 系列的末尾
关于javascript - 淡入/淡出文本幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24313973/
我是一名优秀的程序员,十分优秀!