使用jQuery通过更改src属性为一个图像标签设置动画

Question

我有一个应用程序，其中一个分区包含一个需要每三秒钟更改一次的图像。 但是问题是我还需要向该变化的事件中添加一些动画。 我尝试了几件事，但是看起来并不令人满意。 有什么办法可以在此使用animate（）吗？ 我的仅更改图像的代码如下：

var arrayOfImages //asssume that this array have 10 images   
  var i = 0;  
  setInterval(function(){
  $('.imageBox').attr('src', arrayImg[i]); 
  i++; 
  if(i == 10) i=0; 
  }, 3000);

除此之外，我也尝试了fadeIn和fadeOut，但这看起来也很幼稚。

var i = 0;
    setInterval(function(){
        $('.imageBox').fadeOut(500, function() {
            $('.imageBox').attr("src",arrayImg[++i]);
            $('.imageBox').fadeIn(500);
        });
      if(i == 10) i=0; 
      }, 3000);

请对此提供任何帮助。 预先谢谢您，这是小提琴的链接http://jsfiddle.net/apf5X/8/

Answer 1

您是否尝试过jQuery Cycle 2 ？

这是一个非常强大的插件，带有许多动画。 不仅适用于图像，而且适用于任何html标签！

Answer 2

使用一个库可能会更容易。

这里有一些建议可以帮助您入门：

• http://flexslider.woothemes.com/
• http://dimsemenov.com/plugins/royal-slider/

还有更多可供选择。 要搜索的一个很好的关键字是javascript图像滑块或jquery图像滑块。