Question

我在Jquery中创建了一个图像滑块，当我移动我的图像时，单击向前或向后按钮，必须更改的图像会下降然后淡出。它像一个小波动。为什么会这样？ JSfiddle链接 - https://jsfiddle.net/76xjmfjo/2/

HTML

<div class="container">
    <img class="back" src="http://placehold.it/50x20/000000"></img>

    <div class="slide-container">
        <div class="slide">
            <img src="http://placehold.it/940x350">
        </div>

        <div class="slide ">
            <img src="http://placehold.it/940x350">
        </div>

        <div class="slide">
            <img src="http://placehold.it/940x350">
        </div>

    </div>
    <img class="forward" src="http://placehold.it/50x20/000000"></img>
</div>

CSS

*{
    margin: 0;
    padding: 0;
}

.container{
    width: 980px;
    margin:  0 auto;
}

.slide-container{
    position: relative;
    margin : 0 auto;
    width: 958px;
    height: 368px;

}
.slide{
    width: 940px;
    position: absolute;
    padding: 4px;
    border: 5px solid black ;
    z-index: 1;
}

.active{
    position: relative;
}

.back,.forward{
    top: 150px;
    position:absolute;
    z-index: 10000;
    cursor: pointer;

}

.forward{
    left: 950px;
}

JQUERY

$(document).ready(function () {

  var speed = 500;

  //showing the first image (adding class active)
  $('.slide').first().addClass('active');
  $('.slide').hide();
  $('.active').show();

  //assigning events for the forward and backward buttons
  $('.forward').on('click', function () {
    nextSlide();
  });
  $('.back').on('click', function () {
    prevSlide();
  });

  //next Slide function
  function nextSlide() {
    $('.active').removeClass('active').addClass('oldActive');
    if ($('.oldActive').is(':last-child')) {
      $('.oldActive').removeClass('oldActive');
      $('.slide').first().addClass('active');
    } 
    else {
      $('.oldActive').next().addClass('active');
    }
    $('.oldActive').removeClass('oldActive');
    $('.slide').fadeOut(speed);
    $('.active').fadeIn(speed);
  }

  //Previous slide function
  function prevSlide() {
    $('.active').removeClass('active').addClass('oldActive');
    if ($('.oldActive').is(':first-child')) {
      $('.oldActive').removeClass('oldActive');
      $('.slide').last().addClass('active');
    } 
    else {
      $('.oldActive').prev().addClass('active');
    }
    $('.oldActive').removeClass('oldActive');
    $('.slide').fadeOut(500);
    $('.active').fadeIn(500);
  }

});

Answer 1

在$（'。slide'）的完整功能上淡出$（'。active'）;

$('.slide').fadeOut(speed, function(){
    $('.active').fadeIn(speed);
});

Jquery图像滑块图像下降并淡出

1 个答案: