1

@j08691 回答了如何在 jQuery 动画中连续旋转子项？ 有一个很好的例子。但是，我需要扩展他的示例并且看不到如何动态地执行它。这是我所拥有的小图：

在此处输入图像描述

灰色框是我的横幅组，其中包含褪色的 4 个横幅项。绿色框是我的按钮 1 到 4。单击按钮 1 应显示横幅项 1 并隐藏所有其他项。然后，轮换过程应继续使用banneritem 2。如果我单击按钮 4，它应该显示横幅项目 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);
    });
});
4

1 回答 1

1

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

关于您以前的代码的一些注释：

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

祝你好运。

[编辑：将小提琴 URL 更正display:block为banneritem:first-child]

于 2013-10-29T15:40:33.090 回答