0

我在 jquery 中编写了一些代码来循环遍历 div 内的一些图像，淡入每个图像，然后向上滑动该图像（我有一个包装 div，其中隐藏了 div 溢出，其高度小于图像） - 然后淡入下一个图像，向上滑动，重复 - 但是我需要重置幻灯片，以便在下一个循环中图像不会“卡在”顶部。

在褪色和第一张幻灯片（margin-top：-108px;）方面一切都很好 - 但是，当我尝试将 margin-top 重置为 0px 以进行下一次迭代时，它不会重置它，并且在下一次迭代中图像仍位于 -108px 位置。

请原谅我的 Jquery 代码，如果有菜鸟错误，我对它很陌生！

这是我的代码：

CSS

        <style type="text/css" media="screen">
        #slider { height:296px; overflow:hidden; width:822px; position:absolute; left:50%; margin-left:-411px; top:87px; z-index:20; }
        #slider-back { position:absolute; left:50%; margin-left:-411px; height:296px; z-index:29; top:87px; width:822px; background: url("/test/backimage.png") no-repeat scroll 0px 0px transparent; }
    </style>

HTML

    <div id="slider">
        <a href="#"><img src="images/banner/Image1.jpg" id="image1" /></a>
        <a href="#"><img src="images/banner/Image2.jpg" id="image2" /></a>
        <a href="#"><img src="images/banner/Image3.jpg" id="image3" /></a>
    </div>
    <div id="slider-back"></div>

查询

        <script type="text/javascript">

        $(document).ready(function() { 

            var imgs = $('#slider > a > img'); var z = 1; var previousImageId = "";

            $(imgs[0]).show();

            function loop(ev) {
                    imgs.delay(5000).fadeOut(300).eq(z).fadeIn(500, function() {

                    $(this).animate({marginTop:'-108px'}, {queue: false, duration:6000});

                    $(this).css("margin-top","0px");

                    check = z != imgs.length-1 ? z++ : z=0;

                    loop();      
                });
            }
            loop();
        });

    </script>
4

2 回答 2

1

你应该在动画的回调上重置margin complete，否则动画本身会覆盖你设置的margin-top，所以如下：

$(this).animate({marginTop:'-108px'}, {queue: false, duration:6000, complete: function(){
    $(this).css("margin-top","0px");
}});
于 2012-10-24T22:48:23.133 回答
1

如果您喜欢非常短的代码，请尝试插件 jquery-timing。它为动画的连接提供了紧凑的链接语法。它甚至有内联循环。

使用该插件，您的整个代码可以归结为一个 jQuery 链：

$('#slider > a > img').hide().repeat().each($).css({marginTop:0})
    .fadeIn(500).animate({marginTop:-108},6000,$).fadeOut(300);
于 2012-10-25T07:50:38.843 回答