在包装器+按钮导航中旋转子元素
@ j08691回答了如何在jQuery动画中连续旋转孩子的问题？ 有一个很好的例子。 但是，我需要扩展他的示例，无法看到如何动态地执行它。 这是我所拥有的一个小图：
灰色框是我的横幅组，其中包含淡化的4个横幅项。 绿色框是我的按钮1到4.单击按钮1应显示banneritem 1并隐藏所有其他按钮。 然后旋转过程应继续使用banneritem 2。 如果我点击按钮4，它应该显示banneritem 4。
jsfiddle ： http ： //jsfiddle.net/wxvTp/
HTML：
Lorem Ipsum 1
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Wir freuen uns auf Ihr Projekt. Lorem Ipsum 2
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Wir freuen uns auf Ihr Projekt. Lorem Ipsum 3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Wir freuen uns auf Ihr Projekt. Lorem Ipsum 4
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Wir freuen uns auf Ihr Projekt.
编辑：这是我尝试过的，然而，它是a）不工作，b）必须为所有4个按钮完成。
$( ".button4" ).click(function() { $('div.bannergroup').each(function () { $('div.banneritem', this).not(':nth-child(4)').hide(); var thisDiv = this; setInterval(function () { var idx = $('div.banneritem', thisDiv).index($('div.banneritem', thisDiv).filter(':visible')); $('div.banneritem:eq(' + idx + ')', thisDiv).fadeOut(0, function () { idx++; if (idx == ($('div.text', thisDiv).length)) idx = 0; $('div.banneritem', thisDiv).eq(idx).fadeIn(600); }); }, 6000); }); });
看看这个： http ： //jsfiddle.net/Palpatim/TfK4J/6/
您之前代码的一些注意事项：
- 使用CSS而不是jquery设置
.banneritem的初始状态。 浏览器的工作量较少，而且jquery可以隐藏和显示的内容不太可能获得内容的“闪存”。
- 你在
setInterval调用中做了很多工作，但实际上你只想显示一个新的横幅。 尽可能重构代码以减少间隔中的工作量
祝好运。
[编辑：更正了显示的小提琴URL display:block banneritem:first-child上的banneritem:first-child ]
