0

初めての試みであるカルーセルを作成しようとしています。http://jsfiddle.net/PmNM5/

HTML は UL LI を保持し、各 LI には 2 つの画像があり、両方とも幅 242px と高さ = 81px を累積します

複数の LI のうち、3 つだけが表示されます (つまり、1 つの LI が 2 つの画像を保持するため、6 つの画像が表示されます。float:left それぞれ)。

UL : WIDTH が 242px の BLOCK を表示するように設定されています。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>

ジャバスクリプト:

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 に答える