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

我认为答案在于功能下降的某个地方。

谢谢你的时间！

4

1 回答 1

3

问题是您要在两个地方添加“活动”类。鉴于您的代码设计，您应该只在 down() 函数中添加/删除它。

只需删除 cross() 中的行：

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

此外，您需要将 $count2 重置为 4，否则它只会循环两次。在 down() 中执行此操作，具体请参阅我的 Fiddle。

这是我自己的 Fiddle 版本。我将 HTML、CSS 和 JavaScript 分开，这样我调试起来更容易。

链接：jsFiddle

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

链接：没有 $count2 的 jsFiddle

于 2013-02-24T21:05:57.457 回答