Question

我有这个当前的设置，我需要更改它，以便在单击输入上一个/下一个按钮时只有图像向左/向右移动，我的网站的其余部分由顶部的标题表示小提琴不需要用图像向右移动。

在jquery中我有window.scrollX，但我基本上只需要允许div'#imageWrapper'移动，让我的网站的其余部分保持原样。我对jquery不是很好，所以如果有人能帮助我需要的东西会很棒......

请看我的jsfiddle看看我需要什么。

有人可以帮忙吗？

这是我的小提琴 - http://jsfiddle.net/s2TJQ/441/

$(function() {
    var boxLefts = [];
    $('.images').each(function(i, el) {
        boxLefts.push(this.offsetLeft);
    });
    $("input").click(function(e) {
        var dir = false,
            targetLeft = -1;

        var target = e.target.className;
        if (target == 'next') {
            dir = 1;
        } else {
            dir = -1;
        }
        if (dir) {
            e.preventDefault();
            winLeft = window.scrollX;
            $.each(boxLefts, function(i, v) {
                if ((dir == 1 && winLeft < v && targetLeft < 0) || (dir == -1 && winLeft > v)) {
                    targetLeft = v;
                }
            });
            if (targetLeft >= 0) {
                $('html:not(:animated), body:not(:animated)').stop().animate({
                    scrollLeft: targetLeft
                }, 1000);
            }
        }
        return false;
    });
});

Answer 1

请看我的演示！

http://jsfiddle.net/s2TJQ/443/

我改变了css：

#imageWrapper + margin-top: 105px;

.siteContent +

margin-bottom: 0px;
width: 100%;
position: fixed;
left: 0px;
top: 0px;

更新：根据您的评论，我在您的代码中更改了很多内容！试试这个演示，让我知道它的工作原理你想要的！ http://jsfiddle.net/s2TJQ/446/

注意：仍然错过了何时何地停止滑动！

将jquery调整为滑动div而不是window.scrollX - 滑动整个窗口

1 个答案: