Question

所以我正在制作这个网站designq.ru

你可以看到该网站制作了一个fadein / fadeout和backward的循环。但我不知道如何使它成为无限循环。我尝试使用while（1＆lt; 2）{}循环，但它不起作用。这是HTML和jquery代码：

<ul>
<li><a href="industrial.html"><img id="test1" src="71.jpg" alt="81.jpg""></a></li>
<li><a href="sites.html"><img id="test2" src="72.jpg" alt="82.jpg"> </a></li>
<li><a href="interior.html"><img id="test3" src="73.jpg" alt="83.jpg""></a></li>
<li><a href="style.html"><img id="test4" src="74.jpg" alt="84.jpg"></a></li>
<li><a href="furniture.html"><img id="test5" src="75.jpg" alt="85.jpg"></a></li>
<li><a href="politech.htm"><img id="test6" src="86.jpg" alt="87.jpg"></a></li>
</ul>

<script>
var vvv = function(x){
var ASD = $("#test"+x).attr('alt');
var ZXC = $("#test"+x).attr('src');
$("#test"+x).hide('fade', 2000, function() {
$("#test"+x).attr('alt', ZXC);
$("#test"+x).attr('src', ASD).show('fade', 2000);
    });
};

var ggg = function(){
setTimeout('vvv(1)',2000);
setTimeout('vvv(2)',5000);
setTimeout('vvv(3)',8000);
setTimeout('vvv(4)',11000);
setTimeout('vvv(5)',14000);
setTimeout('vvv(6)',17000);

setTimeout('vvv(1)',20000);
setTimeout('vvv(2)',23000);
setTimeout('vvv(3)',26000);
setTimeout('vvv(4)',29000);
setTimeout('vvv(5)',32000);
setTimeout('vvv(6)',35000);
};
$(document).ready(ggg () );
</script>

Answer 1

您可以使用单个setInterval

代替setTimeout

(function() {
    var counter = 1;
    setInterval(function() {
        vvv(counter++);

        if(counter === 7) counter = 1;
    }), 3000);
})();

jQuery无限fadein /淡出多个图像的循环

1 个答案: