jQuery bxSlider анимация после слайда - PullRequest
Новая
       5

jQuery bxSlider анимация после слайда

3 голосов
/ 07 февраля 2012

Я использую jQuery bxSlider, чтобы добавить элементы на мои слайды. То, что я хочу сделать, это анимировать (постепенно добавлять) элементы на каждом слайде, используя onAfterSlide: function (). он анимируется на слайдах от 1 до 5, но не анимируется (исчезает) только на последнем слайде.

вот код. Может ли кто-нибудь помочь, пожалуйста? 

<script type="text/javascript">
$(function(){
  var slider = $('#slider1').bxSlider({
  controls: true,
  duration: 2000,
  easing: 'easeInOutQuart',

  onAfterSlide: function(currentSlide){
    if(currentSlide==0){
      $("#block").fadeIn("slow");
    }else{
      $("#block").hide();
    }
    if(currentSlide==1){
      $("#block2").fadeIn("slow");
    }else{
      $("#block2").hide();
    }
    if(currentSlide==2){
      $("#block3").fadeIn("slow");
    }else{
      $("#block3").hide();
    }
    if(currentSlide==3){
      $("#block4").fadeIn("slow");
    }else{
      $("#block4").hide();
    }
    if(currentSlide==4){
      $("#block5").fadeIn("slow");
    }else{
      $("#block5").hide();
    }
    if(currentSlide==5){
      $("#block6").fadeIn("slow");
    }else{
      $("#block6").hide();
    }
   }
});
$('.thumbs a').click(function(){
var thumbIndex = $('.thumbs a').index(this);
slider.goToSlide(thumbIndex);
$('.thumbs a').removeClass('pager-active');
$(this).addClass('pager-active');
return false;
});
$('.thumbs a:first').addClass('pager-active');
});
</script>



<ul id="slider1">
<li class="slider1-1">
<div id="block" style="background-color: red; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;">
</div>
</li>
<li class="slider1-2">
<div id="block2" style="background-color: white; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;">
</div>
</li>
<li class="slider1-3">
<div id="block3" style="background-color: black; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;">
</div>
</li>
<li class="slider1-4">
<div id="block4" style="background-color: black; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;">
</div>
</li>
<li class="slider1-5">
<div id="block5" style="background-color: black; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;">
</div>
</li>
<li class="slider1-6">
<div id="block6" style="background-color: #FFF; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;">
</div>

</li>
</ul>

<div class="thumbs">
<a href=""><img src="img/1.jpg" width="50" height="50" /></a>
<a href=""><img src="img/2.jpg" width="50" height="50" /></a>
<a href=""><img src="img/3.jpg" width="50" height="50" /></a>
<a href=""><img src="img/4.jpg" width="50" height="50" /></a>
<a href=""><img src="img/5.jpg" width="50" height="50" /></a>
<a href=""><img src="img/6.jpg" width="50" height="50" /></a>
</div>

Ответы [ 2 ]

0 голосов
/ 25 апреля 2012

Поскольку вы не указываете режим: fade, bxSlider по умолчанию установлен в горизонтальное положение, а ваш fadeIn javascript может переопределить это, bxSlider дублирует первый и последний слайд для горизонтального режима, чтобы сделать переход плавным.Это означает, что ваша страница заканчивается двумя идентификаторами «block» и двумя идентификаторами «block6», что нарушает работу javascript, поскольку вы должны иметь только экземпляр конкретного идентификатора.Я исправил это в настройке слайдера, используя вместо этого имена классов.

0 голосов
/ 07 февраля 2012

Вы скрываете элементы управления.Вместо hide используйте fadeOut.hide устанавливает display: none, где fadeOut устанавливает непрозрачность на ноль, что противоположно fadeIn

Надеюсь, это поможет вам.

...