javascript - bxslider水平淡入淡出效果

Question

帮助使 slider 滚动 block ，但在添加选项时它们会淡出淡入只有一个 block 。

enter jsfiddle.net

<div class="slider1">
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar1"></div>
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar2"></div>
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar3"></div>
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar4"></div>
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar5"></div>
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar6"></div>
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar7"></div>
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar8"></div>
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar9"></div>
</div>

 $(document).ready(function(){
  $('.slider1').bxSlider({
    slideWidth: 200,
    minSlides: 2,
    maxSlides: 3,
    slideMargin: 10
  });
});

Answer 1

我用一个 slider 解决了这个问题

http://jsfiddle.net/5znhaabw/

onSlideNext: function (eSlide, iIndPrev, iIndCur) {
  var eSlideCur = eSlide.children(),
      eSlidePrev = eSlide.prev().children();

  if (iIndCur == 0) {
    eSlidePrev = eSlide.siblings().last().prev().children();
    eSlideCur = eSlide.siblings().last().children().add(eSlide.children());
  };
  eSlideCur.stop().css('opacity', 0).delay(350).animate({opacity: 1}, 300);
  eSlidePrev.stop().animate({opacity: 0}, 300);
},
  onSlidePrev: function (eSlide, iIndPrev, iIndCur) {
    var eSlideCur = eSlide.children(),
        eSlidePrev = eSlide.next().children();

    if (iIndCur == eSlide.siblings().andSelf().length - 2 - 1) {
      eSlidePrev = eSlide.siblings().first().next().children();
      eSlideCur = eSlide.siblings().first().children().add(eSlide.children());
    };
    eSlideCur.stop().css('opacity', 0).delay(350).animate({opacity: 1}, 300);
    eSlidePrev.stop().animate({opacity: 0}, 300);
  }

我认为你可以使用 onSlideBefore()