0

我正在尝试创建一个旋转木马，这是我第一次尝试。http://jsfiddle.net/PmNM5/

HTML 包含 UL LI，每个 LI 有 2 个图像，宽度为 242px，高度为 81px

在几个 LI 中，只有 3 个应该是可见的（即 6 个图像将是可见的，因为一个 LI 包含 2 个图像，每个图像浮动：左。）

UL ：设置为显示 BLOCK，宽度为 242px。HTML 显示完美。但轮播不起作用，因为我知道我需要巧妙地计算出我所缺乏的 TOP。

<div id="home_carousel">
        <ul>
            <li>
                <a href="#img1" class="inline cboxElement"><img src="images/home-truck1.jpg"></a>
                <a href="#"><img src="images/home-truck1.jpg"></a>
            </li>

            <li>
                <a href="#"><img src="images/home-truck1.jpg"></a>
                <a href="#"><img src="images/home-truck1.jpg"></a>
            </li>
            <li>
                <a href="#"><img src="images/home-truck1.jpg"></a>
                <a href="#"><img src="images/home-truck1.jpg"></a>
            </li>
            <li>
                <a href="#"><img src="images/home-truck1.jpg"></a>
                <a href="#"><img src="images/home-truck1.jpg"></a>
            </li>

JAVASCRIPT：

var myCarousel = {

    setHeight: function() {

        var $img = $('li', '#home_carousel');
        var total = 81 * $img.length;

        $('#home_carousel ul').height(total);

    },

    slide: function() {
        var outPart = $('#home_carousel ul').outerHeight();
        $('#home_carousel_up').on('click', function() {

            var $a = $(this);

            $('#home_carousel ul').animate({
                top: -81 + outPart + 'px'
            }, 500, 'easeOutBounce');

        });

        $('#home_carousel_down').on('click', function() {

            var $a = $(this);

            $('#home_carousel ul').animate({
                top: 81 + 'px'
            }, 500, 'easeOutBounce');

        });

    },

    init: function() {
        this.setHeight();
        this.slide();
    }

};

myCarousel.init();
4

1 回答 1

1

试试这个

我已经编写了顶部偏移和在端点停止动画的所有逻辑。

滚动顶部时，条件为：

($('#home_carousel ul').position().top - 81) >  (242 - outPart)

向下滚动时，条件为：

$('#home_carousel ul').position().top + 81 <= 0

我已经对所有值进行了编码。请在变量中存储诸如 81 和 242（包装器高度）之类的数字。如果您通过 jquery .outerHeight 方法计算高度，那就太好了。在这种情况下，如果由于您的标记或 CSS 的更改而改变了高度，那么您的代码将不会中断。

于 2013-03-21T05:48:34.970 回答