在包裝中旋轉子元素+按鈕導航

Question

@ j08691回答了問題How to continuously rotate children in a jQuery animation? 有一個很好的例子。 但是，我需要擴展他的例子，不能看到如何動態地做到這一點。 這是什麼，我有一個小圖形：

灰色盒子是我旗組，其中包含衰落4個banneritems。 綠色框是我的按鈕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> 

編輯：這是我嘗試過，但是，它是）不工作，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/

的一些注意事項您以前的代碼：

• 設置你的.banneritem的初始狀態使用CSS，而不是jQuery的。瀏覽器的工作量減少，並且不太可能獲得內容的「閃光」，因爲jquery會計算出應該隱藏和顯示的內容。
• 您在撥打setInterval時正在做很多工作，但您真正想做的只是展示新的橫幅。重構代碼，儘可能減少在區間

好運氣正在開展的工作。

[編輯：糾正小提琴URL到對banneritem:first-child具有display:block一]