切换Div on按钮单击

Question

I am trying to create a carousel like effect on div s such thta when i click on a but, the next div displays and the previous one fadeOut . Below is my code

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;
}

The thing is i have used this same method with setInterval for an image slider but here when i click on the button the first time, it shows the next div (the white one) but when i click again, it doesn't change to the next div (the red one #dd0d0d). What could be the issue and how do i fix. Thanks.

Answer 1

Once you click on right anchor tag you should change value of oCurImage and oNxtImage and for getting first div inside div with class .webTut you should use $(".webTut div:first");

You can run below code snippet.

 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>