Question

@ j08691回答了问题How to continuously rotate children in a jQuery animation? 有一个很好的例子。但是，我需要扩展他的示例，并且无法看到如何动态地执行它。这是我所拥有的一个小图：

enter image description here

灰色框是我的横幅组，其中包含淡化的4个横幅项。绿色方框是我的按钮1到4。单击按钮1应显示banneritem 1并隐藏所有其他项。然后旋转过程应继续使用banneritem 2。如果我点击按钮4，它应该显示banneritem 4。

jsfiddle ：http://jsfiddle.net/wxvTp/

HTML：

<div class="col3 bannergroup">
    <div class="banneritem">
        <h1>Lorem Ipsum 1</h1>
        <p>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.</p>
        <a href="#" title="Jetzt unverbindliches Angebot anfordern" class="btn orange">Wir freuen uns auf Ihr Projekt.</a>
    </div>
    <div class="banneritem">
        <h1>Lorem Ipsum 2</h1>
        <p>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.</p>
        <a href="#" title="Jetzt unverbindliches Angebot anfordern" class="btn orange">Wir freuen uns auf Ihr Projekt.</a>
    </div>
    <div class="banneritem">
        <h1>Lorem Ipsum 3</h1>
        <p>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.</p>
        <a href="#" title="Jetzt unverbindliches Angebot anfordern" class="btn orange">Wir freuen uns auf Ihr Projekt.</a>
    </div>
    <div class="banneritem">
        <h1>Lorem Ipsum 4</h1>
        <p>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.</p>
        <a href="#" title="Jetzt unverbindliches Angebot anfordern" class="btn orange">Wir freuen uns auf Ihr Projekt.</a>
    </div>                              
    <div class="slider-control-nav desktop"> <!-- buttons are here -->
        <a class="button1" href="#">
            <img src="images/icon-slider-control-cs.png" alt="Grafikdesign" />
        </a>
        <a href="#" class="button2">
            <img src="images/icon-slider-control-gd.png" alt="Content Strategy" />
        </a>
        <a class="button3" href="#">
            <img src="images/icon-slider-control-wd.png" alt="Grafikdesign" />
        </a>
        <a class="button4" href="#">
            <img src="images/icon-slider-control-cs.png" alt="Content Strategy" />
        </a>
    </div>
</div>

编辑：这是我尝试的，但是，它是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);
    });
});

Answer 1

看看这个：http://jsfiddle.net/Palpatim/TfK4J/6/

关于您之前代码的一些注意事项：

使用CSS而不是jquery设置.banneritem的初始状态。浏览器的工作量减少，并且不太可能获得内容的“闪存”，因为jquery会找出应隐藏和显示的内容。
你在setInterval电话中做了很多工作，但实际上你想做的就是展示一个新的横幅。尽可能重构代码以减少在区间内完成的工作

祝你好运。

[编辑：修正了display:block上banneritem:first-child

}的小提琴网址

在包装器+按钮导航中旋转子元素

1 个答案: