0

データベースから取得した製品を含む 3 つの div をアニメーション化するスクリプトがここにあります。ページが初めて読み込まれたときにうまくアニメーション化されますが、私の問題は、1分後にページを更新するたびにうまくアニメーション化されないことです。

<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

新しい setInterval を開始する前に、以前の setInterval をクリアしていません。show1()、show2()、および show3() のすべての setInterval の前に clearInterval(x) を使用します。それが役立つことを願っています。

show2() に冗長な if else ループがあります。ここで確認してください（http://jsfiddle.net/cJ9FK/）

それが役立つことを願っています、ありがとう

于 2013-01-08T11:43:00.950 に答える