下面的代码成功地淡入一个证明6秒,等待3秒,然后淡出并移动到下一个。一旦它到达第三个证明它跳回第一个。这正是我想要的,但在我的实际网站上,我有三个以上的推荐,并在未来可能会增加更多。我不想每次添加一个新的推荐时都要回去添加一个新的功能。我尝试了一段时间,使用“this”和.next()来让它工作,但失败了。我希望有人可以通过循环它并让它移动到容器中的下一个p标记而不必每次都调用新函数来使它更有效。任何帮助都是感激的,谢谢。
注:我知道有类似的问题,但没有一个是完全相同的,答案是低于标准杆。
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
#tml-container p { display: none; }
</style>
</head>
<body>
<div id="tml-container">
<p id="one">Testimonial 1</p>
<p id="two">Testimonial 2</p>
<p id="three">Testimonial 3</p>
</div>
<script>
$(document).ready(function() {
function doFade() {
$("#one").fadeIn(6000,function() {
$("#one").fadeOut(6000).delay(3000);
setTimeout(fadeTwo,6000);
});
}
function fadeTwo() {
$("#two").fadeIn(6000,function() {
$("#two").fadeOut(6000).delay(3000);
setTimeout(fadeThree,6000);
});
}
function fadeThree() {
$("#three").fadeIn(4000,function() {
$("#three").fadeOut(6000).delay(3000);
setTimeout(doFade,6000);
});
}
doFade();
});
</script>
</body>
</html>
2条答案
按热度按时间kh212irz1#
这是一个非常简单的解决方案:
DEMO
可复用插件版本:
它不是迭代某个元素的子元素,而是迭代选定的元素。
可用作:
DEMO
eqzww0vc2#
改变了一个自我开发的插件,以满足您的要求,没有测试它完全虽然。
至少应该教你怎么把这种东西弄好。
希望这有帮助:)