如果语句在setInterval内部不起作用

空名

我正在尝试修改此幻灯片:http : //css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/

我的脚本是:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slideshow > div:gt(0)").hide();
var count = 1
setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    if (count == 1) 
    {
        count++
    }
    else 
    {
        .animate({top: '-100px'}, 1000)
        count++
    }
    if (count==3) 
    {
        count=1
    }
    .end()
    .appendTo('#slideshow');
},  3000);
});
</script>

因此,我尝试让所有其他幻灯片对象(divs)都使用动画方法,但首先要使用animate方法。

如果我删除所有这些计数,并且删除变量和语句(但将动画保留在原处),则它将起作用,从而使每个div都具有动画效果。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slideshow > div:gt(0)").hide();
setInterval(function() { 
    $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .animate({top: '-100px'}, 1000)
    .end()
    .appendTo('#slideshow');
},  3000);
});
</script>

如果重要的话,此脚本包含在cmsms页中。

这是我的第一个javascript,也许可以解释很多...

这是一个快速的解决方案:

<script>
    $(function() {

        $("#slideshow > div:gt(0)").hide();

        var
            count = 1;

        setInterval(function() { 
          $('#slideshow > div:first')
            .fadeOut(1000, function () {
                if(count != 1)
                    $(this).css('top', '10px');

                count++;
            })
            .next()
            .fadeIn(1000, function() {
                if(count != 1) 
                    $(this).animate({top: '-100px'}, 1000);

                if(count == 3)
                    count = 0;
            })
            .end()
            .appendTo('#slideshow');
        },  3000);

    });
</script>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章