切換Div on按鈕單擊

Question

我試圖在div上創建類似旋轉木馬的效果，例如當我單擊but時，將顯示下一個div和上一個div fadeOut 。 下面是我的代碼

var oCurImage = $(".webTut div.current");
var oNxtImage = $(oCurImage).next();
var leftBtn = $('.tutLeft'), rightBtn = $('.tutRight');

$(rightBtn).click(function() {
      oCurImage.fadeOut().removeClass('current');
      oNxtImage.fadeIn().addClass('current').animate({opacity: 1.0}, 1000);

      if (oNxtImage.length == 0) {
          oNxtImage = $(".webTut div:first-child");
      }
});

HTML

<div class="webTut">
  <span class="tutBtn"><a class="tutLeft"><i class="fa fa-angle-left"></i></a><a class="tutRight"><i class="fa fa-angle-right"></i></a></span>
  <div class="current">
  <img src="images/egold.png">
  <h1>cname</h1>
  <h3>Welcome to nigeriaeexport.com</h3>
  <p>Your one stop platform for everything export</p>
  </div>
  <div style="background: #fff;"></div>
  <div style="background: #dd0d0d;"></div>
</div>

CSS

.webTut div {
    width: 60%;
    height: 80%;
    background: #28bc88;
    margin: 6.5% auto 0 auto;
    border-radius: 4px;
    box-shadow: 0 0 4px rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.5);
    text-align: center;
    display: none;
    /*854 x 720*/
}
.webTut div.current {
    display: block;
    z-index: 1;
}

事情是我用setInterval的圖像滑塊使用了相同的方法，但是在這里，當我第一次單擊按鈕時，它顯示下一個div（白色），但是當我再次單擊時，它不會更改為下一個div （紅色的＃dd0d0d）。 可能是什么問題，我該如何解決。 謝謝。

Answer 1

一旦單擊了右錨標記，就應該更改oCurImage和oNxtImage值，並且要使用類.webTut在div中獲取第一個div，應使用$(".webTut div:first");

您可以在下面的代碼段中運行。

 var oCurImage = $(".webTut div.current"); var oNxtImage = $(oCurImage).next(); var leftBtn = $('.tutLeft'); var rightBtn = $('.tutRight'); $(rightBtn).click(function() { oCurImage.fadeOut().removeClass('current'); if (oNxtImage.length == 0) { oNxtImage = $(".webTut div:first"); } oNxtImage.fadeIn().addClass('current').animate({opacity: 1.0}, 1000); oCurImage = $(".webTut div.current"); oNxtImage = $(oCurImage).next(); }); 

 .webTut div { width: 60%; height: 80%; background: #28bc88; margin: 6.5% auto 0 auto; border-radius: 4px; box-shadow: 0 0 4px rgba(0,0,0,.5); -webkit-box-shadow: 0 0 4px rgba(0,0,0,.5); text-align: center; display: none; /*854 x 720*/ } .webTut div.current { display: block; z-index: 1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="webTut"> <span class="tutBtn"><a class="tutLeft">left</a> <br/><br/><a class="tutRight">right</i></a></span> <div class="current"> <h1>cname</h1> <h3>Welcome to nigeriaeexport.com</h3> <p>Your one stop platform for everything export</p> </div> <div style="background: #fff;">First Div</div> <div style="background: #dd0d0d;">Second Div</div> </div>