Question

我正在尝试制作旋转木马，这是我有史以来的第一次尝试。 http://jsfiddle.net/PmNM5/

HTML拥有UL LI，每个LI有2个图像，累积宽度为242px，高度= 81px

在几个LI中，只有3个应该是可见的（即6个图像将是可见的，因为One LI拥有2个图像，float：左边各个。）

UL：设置为显示BLOCK，WIDTH为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();

Answer 1

尝试this

我已经为顶部偏移编写了所有逻辑，并在终点处停止了动画。

滚动顶部时，条件为：

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

当向下滚动条件时：

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

我已经扼杀了所有价值观。请在变量中存储81和242（包装器高度）等数字。如果你通过jquery .outerHeight方法计算高度会很棒。在这种情况下，如果由于标记或CSS的更改而导致高度发生变化，那么您的代码就不会中断。

垂直旋转木马jQuery

1 个答案: