Question

当我点击a，下一个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>

Switch Div on按钮单击

1 个答案: