0

我在这里有一个脚本，其中包含来自数据库的产品的 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>
4

1 回答 1

0

You are not clearing your previous setInterval before starting new setInterval. Use clearInterval(x) before every setInterval in your show1(), show2() and show3() . hope it ll help.

You have redundant if else loop in your show2() . check it here (http://jsfiddle.net/cJ9FK/)

Hope it'll help, Thank you

于 2013-01-08T11:43:00.950 回答