幻灯片后jQuery bxSlider动画

我使用jQuery bxSlider淡入幻灯片中的元素。我想要做的是使用onAfterSlide：function（）来动画（淡入）每个幻灯片上的元素。它在1to5幻灯片上进行动画处理，但只在最后一张幻灯片上不动画（淡入）。幻灯片后jQuery bxSlider动画

这里是代码。任何人都可以请帮忙？

<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>

来源

2012-02-07 tetsu

您在隐藏控件。而不是hide使用fadeOut。 hide设置display: none凡为fadeOut套不透明度为零是fadeIn

希望这有助于你的逆转。

来源

2012-02-07 09:17:05

谢谢你的回复，我修改为fadeOut（）。，但＃block6仍然不会淡入（“慢”）。它显示，但没有动画..只有最后一张幻灯片的＃block6不是动画.. – tetsu 2012-02-07 09:24:22

它工作？如果是，请接受答案，请阅读[FAQ]（http://stackoverflow.com/faq#howtoask）。你需要接受答案，以便其他人可以了解正确的答案。谢谢。 – 2012-02-07 09:26:31

由于您未指定模式：淡入淡出，bxSlider默认为水平，而您的淡入javascript可能会覆盖该模式，bxSlider会为水平模式复制第一张和最后一张幻灯片，以便平滑过渡。这意味着你的页面最后会以两个“block”ID和两个“block6”ID结束，因为你只能拥有特定ID的实例。我在我的滑块设置中通过使用类名来解决这个问题。

来源

2012-04-25 19:20:12

幻灯片后jQuery bxSlider动画

回答

相关问题