jquery - 切换和淡化组中的图像

Question

我有两组使用以下模式命名的图像：

橙子1.jpg 橙子2.jpg 橙子3.jpg 橙子4.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

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

小提琴

Answer 2

尝试这样的事情：

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

感谢你们俩！