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

Question

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

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

所以在第一次移动之后，左边的值读为 1st -100%, 2nd 0%, 3rd 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”函数让滑块自行移动。 然后我会停止画廊的“MouseEnter”事件的间隔（使用“clearInterval”），最后我会使用“one”函数来激活箭头。

注意，使用“one”你应该在动画的最后绑定事件；像这样：

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

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