切换和褪色的图像组中

Question

我有两个群体有以下模式命名的图像：

Oranges1.jpg Oranges2.jpg Oranges3.jpg Oranges4.jpg

Apples1.jpg Apples2 .JPG Apples3.jpg Apples4.jpg

在我的网页我有一个显示从每个组选择图像的一个div：

<div> 
<img src="Oranges1.jpg"/> 
<img src="Oranges2.jpg"/> 
<img src="Apples3.jpg"/> 
<img src="Apples4.jpg"/> 
</div> 

我想通过jQuery来做的是切换和淡入淡出两组之间的图像。例如，当页面将图像加载到负载以上时。然后，5秒后，将图像组切换，所以 “Oranges1.jpg” 变成 “Apples1.jpg”， “Apples3.jpg” 变成 “Oranges3.jpg” 等如：

<div> 
<img src="Apples1.jpg"/> 
<img src="Apples2.jpg"/> 
<img src="Oranges3.jpg"/> 
<img src="Oranges4.jpg"/> 
</div> 

所以，每5秒图像变成相反的组，但是具有相应的图像编号。

有关最佳方法的任何想法？

谢谢！

Answer 1

尝试这样：

setTimeout(function() { 
$('div img').each(function() { 
    if ($(this).prop('src').indexOf('Oranges') != -1) 
     $(this).prop('src', $(this).prop('src').replace('Oranges', 'Apples')); 

    if ($(this).prop('src').indexOf('Apples') != -1) 
     $(this).prop('src', $(this).prop('src').replace('Apples', 'Oranges'));     
}); 
}, 5000) 

Answer 2

setInterval(function(){ 
    $('div > img').each(function(i){ 
     this.src = (/Apples/g.test(this.src) ? 'Oranges' : 'Apples') 
      + (i+1) + '.jpg'; 
    }); 
}, 5000); 

FIDDLE

Answer 3

的格式没有在评论中走出来的非常好，但是两个答案的组合意味着我有去：

setInterval(function(){ 
    $('div > img').each(function(i){ 
     this.src = (/apples/g.test(this.src) ? $(this).prop('src').replace('apples', 'oranges') : $(this).prop('src').replace('oranges', 'apples')); 
    }); 
}, 5000); 

感谢你们两位！