Javascript 旋转包装器中的子元素+；按钮导航

@j08691回答了这个问题 举个很好的例子。 但是，我需要扩展他的示例，而看不到如何动态地进行扩展。 这是我所拥有的一张小图片：

灰色框是我的横幅组，其中包含褪色的4个横幅。 绿色框是我的按钮1到4。 单击按钮1应显示banneritem 1并隐藏所有其他按钮。旋转过程应在banneritem 2中继续进行。如果我点击按钮4，它会显示BannerItem4

jsfiddle：

html:

看看这个：

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

• 使用CSS而不是jquery设置

  .banneritem

  的初始状态。在jquery确定应该隐藏和显示哪些内容时，浏览器所做的工作更少，获得内容“闪现”的可能性也更小
• 您在

  setInterval

  调用中做了很多工作，但实际上您只想显示一个新的横幅。尽可能地重构代码，以减少在间隔时间内完成的工作

祝你好运

[编辑：将fiddle URL更正为在

横幅上有
显示：block
：first child
]

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


使用CSS而不是jquery设置
.banneritem
的初始状态。在jquery确定应该隐藏和显示哪些内容时，浏览器所做的工作更少，获得内容“闪现”的可能性也更小
您在
setInterval
调用中做了很多工作，但实际上您只想显示一个新的横幅。尽可能地重构代码，以减少在间隔时间内完成的工作

祝你好运

[编辑：将fiddle URL更正为在
banneritem:first child
]上具有
display:block
的URL
您已经尝试了什么？您至少需要尝试一下，我们不是来为您做所有工作的。@Johnny000我的jQuery不是很好，对j08691的代码进行概述对我来说很难。我将把我尝试过的jQuery更改添加到代码中。您已经尝试了什么？您至少需要尝试一下，我们不是来为您做所有工作的。@Johnny000我的jQuery不是很好，对j08691的代码进行概述对我来说很难。我将把我尝试过的jQuery更改添加到代码中。非常感谢！但是有一个问题：如果我通过CSS设置初始状态，那么对于没有启用jQuery/Javascript的人来说，不是所有项目都会消失吗？如果我将URL粘贴到正确版本的fiddle上，就不会了。：）我将编辑我的答案以提供正确的链接，但答案是：将
.banneritem:first child
元素设置为
display:block
。我之前的评论并没有完全回答您的问题：是的，通过CSS的初始状态将对未启用javascript的人隐藏。（我不认为jQuery是一个非常有意义的区别。）如果您需要支持非JS用户（并非所有项目都需要），那么您是正确的，不要设置
display:none
。非常感谢您的帮助！非常感谢你！但是有一个问题：如果我通过CSS设置初始状态，那么对于没有启用jQuery/Javascript的人来说，不是所有项目都会消失吗？如果我将URL粘贴到正确版本的fiddle上，就不会了。：）我将编辑我的答案以提供正确的链接，但答案是：将
.banneritem:first child
元素设置为
display:block
。我之前的评论并没有完全回答您的问题：是的，通过CSS的初始状态将对未启用javascript的人隐藏。（我不认为jQuery是一个非常有意义的区别。）如果您需要支持非JS用户（并非所有项目都需要），那么您是正确的，不要设置
display:none
。非常感谢您的帮助！
<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>

   $( ".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);
    });
});