0

感谢堆栈溢出的一些帮助，我设法让这个脚本工作得很好：

var $count = 4;
var $row = 10;

function across() {
    var $active = $('#slideshow .active .current');
    var $next = $active.next();

    $next.addClass('current');
    $active.animate({ left: '+=100px' }, 800, 'swing').removeClass('current');
    $row += 10;
    $count--;

    if ($count == 0) { 
        $count = 4;
        $row = 10;
        down();
        $($active).stop();
        $('#slideshow .active .bed').animate({ left: '-=100px' }, 1);
        $('.div .bed:first-child').addClass('current');

    }
}
function down() {
    var $active = $('#slideshow .active');
    var $next = $active.next();

    $next.fadeIn("slow").addClass('active');
    $active.fadeOut("slow").removeClass('active');

    if (!$next.length) {
        $("#slideshow .div:first-child").fadeIn("slow").addClass('active');
    }
}
$(function() {
  setInterval(across, 1000);
});

http://jsfiddle.net/QSfgG/30/

但有一个问题。

在绿色的父方格上，橙色、紫色和灰色的 div 向右滑动，而在其他方格上，div 仅勉强向左滑动。

这与脚本第 16 行的 down() 函数有关。当它被取出时，所有的 div 都以相同的量滑动。但是，我不能省略 down()，因为我需要先调用它

$('#slideshow .active .bed').animate({ left: '-=100px' }, 1);
$('.div .bed:first-child').addClass('current');

在第 18 行和第 19 行。这样用户就不会看到 div 快速回到原来的位置。澄清一下，我需要橙色、紫色和灰色的 div 以相同的量滑动，并且我需要父 div 在用户看到 div 迅速回到其原始位置之前淡出。

谢谢你的时间！

4

1 回答 1

1

第一次（绿色）床在左边-20px，所以你的+=100px将它们向右移动100px，然后你将活动div更改为下一个，然后你将床移动到-=100px，这些床是-20px，您将它们向左移动 120px，然后 +100 将它们移动到左侧 -20px

如果你把 $('#slideshow .active .bed').animate({ left: '-=100px' }, 1); 在 down() 调用的正上方，你可以修复它（也许你也想移动上面的 $($active).stop() 调用）

http://jsfiddle.net/QSfgG/35/

if ($count == 0) { 
    $count = 4;
    $row = 10;
    $('#slideshow .active .bed').animate({ left: '-=100px' }, 1);
    down();
    $($active).stop();
    $('.div .bed:first-child').addClass('current');
}
于 2013-02-25T01:26:28.990 回答