1

私のスクリプトを見てください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<link href="css.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$count = 4;
$row = 10;
function across() {
    var $active = $('#slideshow .active .current');
    var $next = $active.next();    
    $next.addClass('current');
    $active.animate({left: '+=50px'},800,'swing').removeClass('current');
    $row += 10;
    $count--;
    if($count == 0) { 
        $count = 4;
        $row = 10;
        $($active).stop();
        $('#slideshow .active .bed').animate({left: '-=50px'},1);
        $("#slideshow .div:first-child").addClass('active');
        $(".div .bed:first-child").addClass('current'); 
        down();
    }
}
$count2 = 4;
function down() {
    var $active = $('#slideshow .active');
    var $next = $active.next();    
    $next.addClass('active');
    $active.removeClass('active');
    $count2--;
    if($count2 == 0) { 
        $("#slideshow .div:first-child").addClass('active');
    }
}
$(function() {
  setInterval(across, 1000);
});
</script>
<style>
body {
    background-color: black;    
}
.active {
    border: 1px solid white;
}
.current {
    border: 1px solid white;
}
.div{
    width: 200px;
    height: 200px;
}
.alpha {
    background-color: green;    
}
.beta {
    background-color: yellow;   
}
.gamma {
    background-color: red;  
}
.delta {
    background-color: pink; 
}
.bed {
    width: 50px;
    height: 50px;   
}
.one {
    position: relative;
    top: 0px;
    background-color: orange;   
}
.two {
    position: relative;
    top: 10px;
    background-color: purple;   
}
.three {
    position: relative;
    top: 20px;
    background-color: grey;
}
</style>
</head><body>
<div id="slideshow">
    <div class="div alpha active">
        <div class="bed one current">s</div><div class="bed two">s</div><div class="bed three">s</div>
    </div>
    <div class="div beta">
        <div class="bed one">s</div><div class="bed two">s</div><div class="bed three">s</div>
    </div>
    <div class="div gamma">
        <div class="bed one">s</div><div class="bed two">s</div><div class="bed three">s</div>
     </div>
    <div class="div delta">
        <div class="bed one">s</div><div class="bed two">s</div><div class="bed three">s</div>
    </div>
</div>

</body></html>

http://jsfiddle.net/QSfgG/

うまく機能していますが、お分かりのように、ループが非常に奇妙です。私が望むのは、最初のブロックの正方形がすべて個別に移動してからスライドバックし、次に2番目の正方形が同じことを行い、次に3番目、4番目、そして全体が再びループすることです。そして無限に。

代わりに、最初のブロックが正しく動作し、次に 2 番目、3 番目のブロックが正しく動作しますが、最後に奇妙さが始まります。ブロック 2 と 4 が一緒に動き始め、次にブロック 3、次にブロック 2 と 4 が再び移動します。ブロック 1 は完全に見逃されています。本当に奇妙です。

答えは機能のどこかにあると思います。

御時間ありがとうございます！

4

1 に答える 1

3

問題は、「アクティブ」クラスを2か所に追加していることです。コードデザインを考えると、down（）関数でのみ追加/削除する必要があります。

単にacross（）の行を削除します。

$("#slideshow .div:first-child").addClass('active');

また、$ count2を4にリセットする必要があります。そうしないと、ループが2回だけになります。down（）でそれを行います。詳細については、私のFiddleを参照してください。

これがあなたのフィドルの私自身のバージョンです。HTML、CSS、JavaScriptを分割して、デバッグしやすくしました。

リンク：jsFiddle

もう1つの提案は、$count2を削除することです。$ count2 == 0をチェックする代わりに、！$next.lengthをチェックします。0の場合、真実と評価されます。

リンク：$count2のないjsFiddle

于 2013-02-24T21:05:57.457 に答える