0

我将如何修改我的脚本，以便它能够检测到边缘并且不会滚动超过容器宽度？

包括标记和 JS 以及 JSFiddle - http://jsfiddle.net/carlozdre/4HSLb/8/

<div id="content">
          <div class="inner">
          <img src="http://lorempixum.com/300/300" />
          <img src="http://lorempixum.com/300/300" />
          <img src="http://lorempixum.com/300/300" /> 
          <img src="http://lorempixum.com/300/300" />
          <img src="http://lorempixum.com/300/300" />
          <img src="http://lorempixum.com/300/300" />
          </div>
</div>

<div style="">
 <a class="left" href="#">LEEEEFT</a>
 <a class="right" href="#">RIGHHHT</a>
</div>

<style>
#content { float: left; width: 600px; overflow: scroll; white-space: nowrap; max-width: 3000px;}
.inner {width: 300px;}
</style>

$(function () {
    $('.left').click(function (e) {
        e.preventDefault();
        $('.inner').animate({
            marginLeft: "-=" + 20 + "px"
        }, 'fast');

    });


    $('.right').click(function (e) {
        e.preventDefault();
        $('.inner').animate({
            marginLeft: "+=" + 20 + "px"
        }, 'fast');

    });

});
4

1 回答 1

1

您需要进行一些更改以确保内部容器的大小固定为内部图像的大小，然后检查内部容器的左右位置。

您还最好将动画设置为特定坐标，而不是从前一个坐标中添加或减去，因为它可以更好地处理快速点击。

工作示例：http: //jsfiddle.net/4HSLb/13/

标记：

<div id="content">
    <div class="inner">
        <img src="http://lorempixum.com/300/300" />
        <img src="http://lorempixum.com/300/300" />
        <img src="http://lorempixum.com/300/300" />
        <img src="http://lorempixum.com/300/300" />
        <img src="http://lorempixum.com/300/300" />
        <img src="http://lorempixum.com/300/300" />
    </div>
</div>
<div style=""> <a class="left" href="#">LEEEEFT</a>
 <a class="right" href="#">RIGHHHT</a>

</div>

CSS：

#content {
    float: left;
    width: 610px;
    overflow: hidden;
    white-space: nowrap;
    max-width: 3000px;
}
.inner {
    background:#444;
    height:300px;
}
.inner img {
    float:left;
    margin-right:10px;
}

脚本：

var left = 0;
var contentWidth = 0;
var innerWidth = 0;
var imgCount = 0;
var imgWidth = 310;

$(function () {
    contentWidth = parseInt($('#content').innerWidth());
    left = parseInt($('.inner').css('margin-left'));
    imgCount = $('.inner img').size()
    innerWidth = parseInt(imgCount * imgWidth);

    $('.inner').width(innerWidth + "px");

    $('.left').click(function (e) {
        e.preventDefault();
        updatePos(imgWidth);
        if (left <= 0) {
            $('.inner').animate({
                marginLeft: left + "px"
            }, 'fast');
        }
    });

    $('.right').click(function (e) {
        e.preventDefault();
        updatePos(0 - imgWidth);
        if (left >= 0 - innerWidth + (imgWidth * 2)) {
            $('.inner').animate({
                marginLeft: left + "px"
            }, 'fast');
        }
    });

});

function updatePos(distance) {
    console.log("NewPos: " + (left + distance));
    console.log(0 - innerWidth);
    if (left + distance <= 0 && left + distance >= 0 - innerWidth + (imgWidth * 2)) {
        left = left + distance;
    }
    //console.log(left);
}

编辑： 更新以防止快速点击时过度滚动。

编辑 2： 更新代码以允许轻松更改视图中的图像数量。而不是编辑上面的示例代码，这里是 jsFiddle 上的一个示例：http: //jsfiddle.net/4HSLb/14/

于 2013-05-09T08:57:37.940 回答