Question

我这里有一个脚本，包含产品的3个div来自数据库。它在第一次加载页面时动画效果很好，但我的问题是它在一分钟之后并且每次刷新页面时都没有动画效果。

<html>
<script src='jquery.js'></script>
<script> 
    $(document).ready(function(){
    $("#Slide2").hide();
    $("#Slide3").hide();
});
var h = 1;
var x = setTimeout(show2, 3000);

function show1()
{
    h = 1;
    $("#Slide1").show();
    $("#Slide2").hide();
    $("#Slide3").hide();
    $("#Slide1").css("left", "-400px");
    $("#Slide1").animate({left:'-1px'});
    clearTimeout(x);
    x = setTimeout(show2, 3000);
}
function show2()
{
    if(h <= 2)
    {
        h = 2;
        $("#Slide2").show();
        $("#Slide1").hide();
        $("#Slide3").hide();
        $("#Slide2").css("right", "-400px");
        $("#Slide2").animate({right:'-1px'});
        clearTimeout(x);
        x = setTimeout(show3, 3000);
    }
    else
    {
        h = 2;
        $("#Slide2").show();
        $("#Slide1").hide();
        $("#Slide3").hide();
        $("#Slide2").css("left", "-400px");
        $("#Slide2").animate({left:'-1px'});
        clearTimeout(x);
        x = setTimeout(show3, 3000);
    }
}
function show3()
{

    h = 3;
    $("#Slide3").show();
    $("#Slide2").hide();
    $("#Slide1").hide();
    $("#Slide3").css("right", "-400px");
    $("#Slide3").animate({right:'-1px'});
    clearTimeout(x);
    x = setTimeout(show1, 3000);
}

</script>
<style>
    #Slide1 , #Slide2, #Slide3
    {
        width:530px;
        height:100px;
        position:relative;
        background:blue;
    }
    #container
    {
        width:500px;
        margin:auto;
        border:1pt solid black;
        overflow:hidden;
        height:auto;
    }
</style>
    <body>
        <div id='container'>
            <button onclick="check1()">1</button>
            <button onclick="check2()">2</button>
            <button onclick="check3()">3</button>
            <br></br>
            <div style='width:530px;margin:auto'>
            <div id='Slide1'>
                <div style='width:120px;height:100px;float:left;margin-left:10px;background:#ff0'></div>
                <div style='width:120px;height:100px;float:left;margin-left:10px;background:#ff0'></div>
                <div style='width:120px;height:100px;float:left;margin-left:10px;background:#ff0'></div>
                <div style='width:120px;height:100px;float:left;margin-left:10px;margin-right:10px;background:#ff0'></div>
            </div>
            <div id='Slide2' >
                <div style='width:120px;height:100px;float:left;margin-left:10px;background:green'></div>
                <div style='width:120px;height:100px;float:left;margin-left:10px;background:green'></div>
                <div style='width:120px;height:100px;float:left;margin-left:10px;background:green'></div>
                <div style='width:120px;height:100px;float:left;margin-left:10px;margin-right:10px;background:green'></div>
            </div>
            <div id='Slide3' >
                <div style='width:120px;height:100px;float:left;margin-left:10px;background:red'></div>
                <div style='width:120px;height:100px;float:left;margin-left:10px;background:red'></div>
                <div style='width:120px;height:100px;float:left;margin-left:10px;background:red'></div>
                <div style='width:120px;height:100px;float:left;margin-left:10px;margin-right:10px;background:red'></div>
            </div>
            </div>
        </div>
    </body>
</html>

Answer 1

在开始新的setInterval之前，您没有清除之前的setInterval。在show1（），show2（）和show3（）中的每个setInterval之前使用clearInterval（x）。希望它会有所帮助。

你的show2（）中有多余的if else循环。在这里查看（http://jsfiddle.net/cJ9FK/）

希望它会有所帮助，谢谢

动画失败了

1 个答案: