Question

我正在制作一个图像旋转木马，它们都很好用，但图像之间的淡化并不是我想要的。我希望顺利交叉淡入淡出。现在他们跳转，你可以在我的代码中看到，下面。如何让它更顺畅？

＆＃13;

$.fn.slider = function() {
  var $this = this;
  var $controls = $this.nextAll('.controls').first();
  var index;

  $this.find('li:gt(0)').hide();
  setInterval(function() {
      $this.find('li:first-child').fadeOut(2000)
        .next('li').fadeIn(3000)
        .end().appendTo($this);
      var index = $this.find('li:first-child').data('index');
      $controls.find('li.active').removeClass('active');
      $controls.find('li').eq(index).addClass('active');
    },
    4000);
};

$('#slider1').slider();

＆＃13;

#slider1 {
  position: absolute;
  background-color: #5A6D77;
  top: 0px;
  left: 180px;
  height: 449px;
  width: 195px;
  z-index: 0;
  padding: 0;
}

#slider1 img {
  width: 100%;
  height: 100%;
  z-index: 0;
}

ul {
  list-style: none;
  position: absolute;
}

.images-list {
  position: absolute;
}

.images-list>li {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="slider1" class="images-list">
  <li data-index="0"><img src="https://www.trustedclothes.com/blog/wp-content/uploads/2016/06/bill_gordon_shares_his_spraying_tips.jpg" alt=""> </li>
  <li data-index="1"><img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg" alt=""></li>
  <li data-index="2"><img src="https://static.pexels.com/photos/172292/pexels-photo-172292.jpeg" alt=""></li>
  <li data-index="3"><img src="https://www.alternet.org/sites/default/files/styles/story_image/public/story_images/plastic.png?itok=8_NKVjx4" alt=""></li>
</ul>

＆＃13;

View on JSFiddle

Answer 1

我想我已经足够顺利了，我希望它会对你有所帮助。所以你需要在css中进行更改：

.images-list > li {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    -webkit-transition: 0s;
    -moz-transition: 0s;
    -ms-transition: 0s;
    -o-transition: 0s;
}

和jquery的变化：

  $this.find('li:gt(0)').hide();
  setInterval(function () {
      $this.find('li:first-child').fadeOut(4000)
          .next('li').fadeIn(4000)
          .end().appendTo($this);
        var index = $this.find('li:first-child').data('index');
        $controls.find('li.active').removeClass('active');
        $controls.find('li').eq(index).addClass('active');
  },
  4000);
};

希望它有所帮助，如果没有，将会找出下一步

使图像轮播顺利交叉淡入淡出

1 个答案: