-3

我有这个代码：

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

<script>
$(function()
{
    function animation()
    {
        $('#img0').attr('src',$('#img1').attr('src')).fadeOut(4000).attr('src',$('#img2').attr('src')).fadeIn(4000).fadeOut(4000).attr('src',$('#img3').attr('src')).fadeIn(4000).fadeOut(4000) ;
        animation();
    }
});
</script>

<body>
<img  id="img0" width="613" height="260" alt="OffLease Only Lot" />
<img src="static/images/home/slides/SLIDERS-mP.jpg" id="img1" width="613" height="260" alt="OffLease Only Lot" hidden="true" />
<img src="static/images/home/slides/slider_usa.jpg" id="img2"  width="613" height="260" alt="OffLease Only Lot" hidden="true" />
<img src="static/images/home/slides/SLIDERS-ODOMETER.jpg"  id="img3"  width="613" height="260" alt="OffLease Only Lot" hidden="true" />

</body>
</html>

我希望通过更改图像源来幻灯片显示图像，然后通过出现和消失来继续。
但我的代码不起作用

  • 为什么？
  • 我该如何解决？
4

2 回答 2

0

如果您尝试循环三个图像，请执行以下操作：

function animate1() {
    $('#img1').fadeIn(4000, function() {
        $('#img1').fadeOut(4000, animate2);
    })
}

function animate2() {
    // Do the same thing here, and do animate3 too
}

$(function() { $('#img0').fadeOut(4000, animate1) };

我还需要花一点时间浏览一下 jQuery fadeOut 和 fadeIn 页面。我认为它们的工作方式与您认为的不同。

http://api.jquery.com/fadeOut/

http://api.jquery.com/fadeIn/

于 2013-01-23T23:18:40.650 回答
0

您必须像这样等待动画首先完成...

element$.fadeOut(4000, function () {

  // Do something when faded out

  element$.fadeIn(4000, function () {

    // Do something when faded in

  });
});
于 2013-01-23T23:07:34.117 回答