0

我正在使用以下代码创建滑动卡片效果，其中每个“卡片”都是一个列表元素，它们在屏幕上滑动。它们仅在我设置的具有特定高度和宽度的“阶段”中可见。它工作得很好——除了，虽然卡片很好地向左滑出，但它们并没有从右侧向内执行相同的滑动功能。相反，它只是跳到页面上，看起来有点令人吃惊。

有谁知道我怎样才能让下一个列表项从右侧滑入而不是简单地出现？

谢谢！

JS：

window.addEvent('domready', function () {
    var totIncrement = 0;
    var increment = 968;
    var maxRightIncrement = increment * (-303); //this is -303 because there are 303 cards, but the example below only has 3
    var fx = new Fx.Style('slider-list', 'margin-left', {
        duration: 300,
        //transition: Fx.Transitions.Back.easeInOut,
        wait: true
    });
    // EVENTS for the button "previous"
    var pbuttons = document.getElementsByClassName('prevButton');
    for(i = 0; i < pbuttons.length; i++) {
        $(pbuttons[i]).addEvents({
            'click': function (event) {
                if(totIncrement > maxRightIncrement) {
                    totIncrement = totIncrement + increment;
                    fx.stop()
                    fx.start(totIncrement);
                }
            }
        });
    }
    //-------------------------------------
    // EVENTS for the button "next"
    // var buttons = $('.nextButton');
    var buttons = document.getElementsByClassName('nextButton');
    for(i = 0; i < buttons.length; i++) {
        $(buttons[i]).addEvents({
            'click': function (event) {
                if(totIncrement > maxRightIncrement) {
                    totIncrement = totIncrement - increment;
                    fx.stop()
                    fx.start(totIncrement);
                }
            }
        });
    }
});

HTML：

<div id="slider-stage">
    <ul id="slider-list">
        <li id="l1">
            <!-- previous button -->
            <div class="prev"><a class="prevButton" href="#">Previous</a></div>
            <div>
                <!-- content goes here -->
                <!-- next button -->
                <div class="slider-buttons">
                    <a class="nextButton" href="#">Next</a>
                </div>
            </div>
        </li>
        <li id="l2">
            <!-- previous button -->
            <div class="prev"><a class="prevButton" href="#">Previous</a></div>
            <div>
                <!-- content goes here -->
                <!-- next button -->
                <div class="slider-buttons">
                    <a class="nextButton" href="#">Next</a>
                </div>
            </div>
        </li>
        <li id="l3">
            <!-- previous button -->
            <div class="prev"><a class="prevButton" href="#">Previous</a></div>
            <div>
                <!-- content goes here -->
                <!-- next button -->
                <div class="slider-buttons">
                    <a class="nextButton" href="#">Next</a>
                </div>
            </div>
        </li>
    </ul>
</div>
4

0 回答 0