javascript - 水平幻灯片 - 定义开始和结束

Question

我在 div 上有一个水平幻灯片（使用相对定位），如下所示：

它相应地左右滑动，但我无法让它在幻灯片容器的开始和结束处停止，所以它最终是这样的：

这是JS（jquery）：

$('.timeline-nav').on('click', function() {

    if (!anim)
    {
        anim = true;

        var pos = $(this).hasClass('left') ? 320 : -320;

        pos = parseInt($('.timeline-content-wrapper').css('left')) + pos;

        $('.timeline-content-wrapper').animate({'left': pos}, 600, function() {
            anim = false;
        });
    }

    return;
});

编辑：现场示例

Answer 1

pos = parseInt($('.timeline-content-wrapper').css('left')) + pos;
if (pos < -1120) pos = -1120;
if (pos > 0) pos = 0;

代码可能更短，但这更容易理解:)。第一个 if 取决于元素的宽度；也许您需要在运行时更改或计算。

Answer 2

在这里查看所有工作：

http://jsfiddle.net/yUe23/1/

我已经将一些类 (timeline-content-wrapper) 更改为 ids，并在它周围想象了一些 HTML (timeline-content-mask)

var anim=false;
var pos=0;
var originalPos=0;

$(function() {

    originalPos=$('#timeline-content-wrapper').offset().left;


    $('.timeline-nav').click( function() {

        if (!anim) {

            var $wrapper=$('#timeline-content-wrapper');
            var $mask=$('#timeline-content-mask');        

            var pos = $(this).hasClass('left') ? 200 : -200;
            var wid=$wrapper.width();
            var maskWid=$mask.width();
            var oldPos=$wrapper.offset().left;

            anim = true;

            // alert(parseInt($wrapper.offset().left)+" "+pos+" "+originalPos+" "+originalPos+" "+wid+" "+maskWid);

            pos = parseInt($wrapper.offset().left)-originalPos + pos;

            if(pos<-wid+maskWid) pos=-wid+maskWid;
            else if(pos>0) pos=0;

            $wrapper.animate({'left': pos}, 600, function() {
                anim = false;
            });

        }

        return;
    });


});

Answer 3

这个怎么样：

pos = Math.min(parseInt($('.timeline-content-wrapper').css('left')) + pos, 0);

我假设包装器 div 不应该具有正的左值。

Answer 4

在小提琴上：http: //jsfiddle.net/ktszm/5/

        var max_width = 250;      
        var width_of_viewport = 200;            
        var stopper = max_width - width_of_viewport;  
        var container_position = $('.timeline-content-wrapper').position().left;



        if(container_position == 0 && $(this).hasClass('left')) 
        { 
           pos = 0; 
        }
        else if(container_position == (stopper*-1) && !$(this).hasClass('left')) 
        { 
           pos = 0; 
        }
        else 
        { 
           $('.timeline-content-wrapper').animate({'left': '+='+pos}, 600, function() {
                anim = false;
            });
        }
    }

​</p>