Question

我想要实现的是按顺序淡化图像，但设置它使第一个开始然后是下一个然后下一个，所以连续淡出。

这是我有多远的链接。

http://bwnew.users34.interdns.co.uk/

这是我的代码工作但我想稍微停顿一下，所以从左到右流动。

<script type="text/javascript">
$('#slider img:gt(0)').hide();
$('#slider2 img:gt(0)').hide();
$('#slider3 img:gt(0)').hide();

a=0;
b=0;
c=0;


setInterval(function() {

        $("#slider img").eq(a).fadeOut();
        if(a==$('#slider img').length-1)
            a=0;
        else
            a++;
$("#slider img").eq(a).fadeIn();


$("#slider2 img").eq(b).fadeOut();
        if(b==$('#slider2 img').length-1)
            b=0;
        else
            b++;
$("#slider2 img").eq(b).fadeIn();


$("#slider3 img").eq(c).fadeOut();
        if(c==$('#slider3 img').length-1)
            c=0;
        else
            c++;
$("#slider3 img").eq(c).fadeIn();


}, 3000);

Answer 1

最简单但很明确的：

$('#slider img').fadeIn(function(){
  $('#slider2 img').fadeIn(function(){
    $('#slider3 img').fadeIn();
  });
});

Answer 2

非常感谢这是工作代码

只需要尝试摆脱空白区域。

http://bwnew.users34.interdns.co.uk/

<script type="text/javascript">
$('#slider img:gt(0)').hide();
$('#slider2 img:gt(0)').hide();
$('#slider3 img:gt(0)').hide();

a=0;
b=0;
c=0;

setInterval(function() {                 

$("#slider img").eq(a).fadeOut();
        if(a==$('#slider img').length)
            a=0;
        else
            a++;

$("#slider2 img").eq(b).fadeOut();
        if(b==$('#slider2 img').length)
            b=0;
        else
            b++;

$("#slider3 img").eq(c).fadeOut();
        if(c==$('#slider3 img').length)
            c=0;
        else
            c++;

$("#slider img").eq(a).fadeIn(function(){
  $("#slider2 img").eq(b).fadeIn(function(){
    $("#slider3 img").eq(c).fadeIn();
  });
}); 


}, 3000);


</script>

依次淡化图像

2 个答案: