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

使用库可能会更容易。

以下是一些可以帮助您入门的建议：

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

使用jQuery更改src属性来动画一个图像标记

2 个答案: