Question

我正在为网站的目标网页制作一个简单的图片滑块。发生了两种效应。首先，使用setInterval通过淡入当前的一个和随后的一个来过渡图像。还有一些箭头按钮，单击时可向前或向后滑动图像。褪色工作得很好，但滑动功能使图像处于屏幕外位置。这是：

function slidePrevPic(dur){

    var currentPic = $('.active-pic');
    var prevPic = currentPic.prev();
    if(prevPic.length == 0){
        prevPic = $('#pics img').last();
    }

    $('.arrow').css('pointer-events','none');
    setTimeout(function(){
        $('.arrow').css('pointer-events','auto');
    },dur);

    w = $(window).width();
    prevPic.css('opacity',.4);
    prevPic.css('left',-w);
    prevPic.animate({
        'left': 0
        }, dur);
    currentPic.animate({
        'left': w
        }, dur);
    setTimeout(function(){
        currentPic.css('left',0);
        currentPic.css('opacity',0);
    },dur);

    prevPic.addClass('active-pic');
    currentPic.removeClass('active-pic');
};

function slideNextPic(dur){

    var currentPic = $('.active-pic');
    var nextPic = currentPic.next();
    if(nextPic.length == 0){
        nextPic = $('#pics img').first();
    }

    $('.arrow').css('pointer-events','none');
    setTimeout(function(){
        $('.arrow').css('pointer-events','auto');
    },dur);

    w = $(window).width();
    nextPic.css('opacity',.4);
    nextPic.css('left',w);
    nextPic.animate({
        'left':0
        },dur);
    currentPic.animate({
        'left':-w
    },dur);
    setTimeout(function(){
        currentPic.css('left',0);
        currentPic.css('opacity',0);
    },dur);

    nextPic.addClass('active-pic');
    currentPic.removeClass('active-pic');
};

我试图简化一切以找出问题所在，所以不是隐藏和显示图像或淡入淡出，我只是动画和设置不透明度。这里的想法非常简单。所有的图片都在同一个地方，除了一个之外的所有图片都有0不透明度。调用滑块时，下一个图像在屏幕外移动，当前和下一个图像一起动画（将当前图像移到屏幕外），然后应重置当前图像的位置。滑动效果运行良好，但当前图像的位置未重置，因此当它循环返回时，图像空间变为白色。我仍然普遍对如何管理jquery和js的函数执行时间感到困惑，所以对这个大方向的任何帮助也非常感激。此外，这是调用这些函数的代码：

var picInterval = setInterval(function(){
    fadeNextPic(picFadeTime);
},idleTime);

$('#banner #right-arrow').click(function(){
    clearInterval(picInterval);
    slideNextPic(picSlideTime);
    picInterval = setInterval(function(){
        fadeNextPic(picFadeTime);
    },idleTime);
});

$('#banner #left-arrow').click(function(){
    clearInterval(picInterval);
    slidePrevPic(picSlideTime);
    picInterval = setInterval(function(){
        fadeNextPic(picFadeTime);
    },idleTime);
});

图像滑块，位置不会重置

0 个答案: