jquery简单动画/旋转css背景图像在div内？

我想知道是否有人可以帮助我，或指出我正确的方向。 我正在寻找一个jquery片段，它会自动改变一个div的背景图像，每个说5秒左右。 我的初始bg图像是在css中设置的，但我不确定如何创建函数使其在图像数组之间交换？

我有5张图片：

bg-1.jpg，bg-2.jpg，bg-3.jpg，bg-4.jpg，bg-5.jpg。

目前我的div设置为bg-1.jpg。

真的没有任何代码可以显示，但希望有人可以帮助我:)

Answer 1

像这样的东西应该做的伎俩？

 jQuery( function( $ ) { var images = [ "bg-1.jpg", "bg-2.jpg", "bg-3.jpg", "bg-4.jpg", "bg-5.jpg" ]; var currentImage = 0; function changeBackground() { $( '#page_bg' ).css( { backgroundImage: 'url(' + images[ ++currentImage ] + ')' } ); if ( currentImage >= images.length - 1 ) { currentImage -= images.length; } } setInterval( changeBackground, 5000 ); }); 

Answer 2

如果这些是实际的图像名称，你真的不需要数组。

  // cache the element var $page_bg = $('#page_bg'); setInterval( function() { $page_bg.css( 'background-image', function(i,bg) { return bg.replace(/\d/, function(str) { return (str % 5) + 1;}); }); }, 5000); 

在return (str % 5) + 1; 部分，数字5代表图像的总数。 它们应该从1开始按顺序编制索引。

---

编辑：或者如果URL中的其他地方有一个数字，那么请改为：

  // cache the element var $page_bg = $('#page_bg'); setInterval( function() { $page_bg.css( 'background-image', function(i,bg) { return bg.replace(/(\d)(\.jpg)/, function(str,p1,p2) { return ((p1 % 5) + 1) + p2;}); }); }, 5000);