Question

请好好看一下我的剧本：

<!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和4开始一起移动，然后块3，然后块2和4再次移动。第1区完全错过了。真的很奇怪。

我认为答案在于功能下降。

谢谢你的时间！

Answer 1

问题是你在两个地方添加了'主动'课程。鉴于您的代码设计，您应该只在down（）函数中添加/删除它。

只需删除（）中的行：

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

此外，您需要将$ count2重置为4，否则它只会循环两次。在down（）中执行此操作，请参阅我的小提琴，了解详细信息。

这是我自己的小提琴版。我拆分了HTML，CSS和JavaScript，因此我更容易调试。

链接：jsFiddle

另一个建议是删除$ count2。而不是检查$ count2 == 0，检查！$ next.length。当它为0时，它将评估为真实。

链接：jsFiddle without $count2

Jquery循环表现奇怪

1 个答案: