jQuery 将 css left 设置为值 1，完成后设置为值 2？

Question

我只是好奇如何实现以下目标:

我创建了一个简单的 slider ，自动向左滑动。初始加载时，幻灯片的排列方式如下:第一张 0% left、第二张 100% left、第三张 200% left。它们会自动向左滑动。

因此，在第一次移动之后，左边的值读取为第一个 -100%、第二个 0%、第三个 100%。下一步，在 3 张幻灯片示例中，left -100% 的元素将变为 left 200%。

现在我实现了向左移动/向右移动按钮。虽然向左移动按钮很容易使用，但我在使用向右移动按钮时遇到了很多问题。

问题:

如果没有包含 css left -100% 的幻灯片，则需要将最右边的幻灯片放到该位置。在示例中，具有 css left 200% 的幻灯片需要设置为 -100% 并且位置更改后，应设置为 0%.

问题:

Css left -100% 未设置(幻灯片不会从left 200%移动到-100%再到0%，但直接从 200% 到 0%)。

我使用了 queue，但这不管用，我现在一无所知。

在函数中，我首先运行 each() 来识别具有最高左值的元素。然后我再次运行 each() 让它们移动。一切正常，除了上面的问题。

我怎样才能实现我的目标？

function moveSlidesReverse() {
var slides = jQuery('#main').children('.dfmn-section-slider');
var pos2 = 0;

slides.each(function() {
    pos = jQuery(this)[0].style.left;
    pos = parseInt(pos.substring(0,pos.indexOf('%')));
    if (pos == -100) {
        outerSlide = '';
        return false;
    } else if (pos > pos2) {
        pos2 = pos;
        outerSlide = jQuery(this).attr('id');
    } 
});
slides.each(function() {
    pos = jQuery(this)[0].style.left;
    pos = parseInt(pos.substring(0,pos.indexOf('%')));
    if (outerSlide != jQuery(this).attr('id')) {
        jQuery(this).removeClass('dfmn-section-slider-static')
                .addClass('dfmn-section-slider-animate')
                .css('left', (pos+100) + '%');
    } else  {
        jQuery(this).removeClass('dfmn-section-slider-animate')
                .addClass('dfmn-section-slider-static')
                .css('left', '-100%')
                .queue(function() {
                jQuery(this).removeClass('dfmn-section-slider-static')
                        .addClass('dfmn-section-slider-animate')
                        .css('left', '0%')
                        .dequeue;
                });     
    }
});
}

Answer 1

我会使用“setInterval”函数让 slider 自行移动。 然后我会停止画廊的“MouseEnter”事件的间隔(使用“clearInterval”)，最后我会使用“one”函数来激活箭头。

请注意，使用“one”时，您应该在动画的最后绑定(bind)事件；像这样:

$('.NAME').one('click',function(){ "MOVE-YOUR-GALLERY";})

function MOVE-YOUR-GALLERY(){
        $(.gallery).animate({....}, 5000, function(){
        $('.NAME').one('click',function(){ "MOVE-YOUR-GALLERY";})
    } )
}