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秒后，图像组切换，所以＆＃34; Oranges1.jpg＆＃34;成为＆＃34; Apples1.jpg＆＃34;，＆＃34; Apples3.jpg＆＃34;成为＆＃34; Oranges3.jpg＆＃34;等，例如：

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

感谢你们两位！

切换和淡化组中的图像

3 个答案: