javascript - 没有按钮的 slider - pre/next li 触发幻灯片

Question

我正在尝试使用由实际的上一张/下一张幻灯片触发的上一个/下一个操作来获取轮播。

我可以让它工作，但我希望幻灯片随着动画过渡而移动。我所能想到的只是淡入/淡出效果，并不能完全消除它。

在我单击 .prev/.next 后，您是否可以建议我顺利移动 .prev/.next > .main？

HTML:

<div class="view">
                <ul>
                    <li class="prev" data-id="1">first

                    </li><!--
                    --><li class="main" data-id="2">second

                    </li><!--
                    --><li class="next" data-id="3">third

                    </li><!--
                    --><li data-id="4">fourth

                    </li><!--
                    --><li data-id="5">fifth

                    </li>
                </ul>
            </div>

CSS:

.view {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

.view ul {
    list-style-type: none;
    display: block;
    height: 100%;
    width: auto;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.view ul li {
    display: inline-block;
    width: 80%;
    height: 80%;
    margin: 5% 10%;
    padding: 0;
    background: white;
    border: 2px solid #ccc;
}

.view ul li:hover {
    border-color: #75B5FF;
}

.view ul li.main {
    top: -5%;
}

.view ul li.prev {
    height: 75%;
    margin-right: -5%;
    margin-left: -75%;
    top: 5%;
}

.view ul li.next {
    height: 75%;
    margin-left: -5%;
}

jQuery:

$('body').on('click', 'li.prev', function() {
    $("body").find( "li" ).eq( 2 ).removeClass("next")
    $(this).next().removeClass().addClass("next");
    $(this).removeClass().addClass("main");
    $(this).prev().removeClass().addClass("prev");

    var $this = $(this),
        callback = function() {
            $this.siblings(':last()').insertBefore($this).addClass("prev");
        };
    $this.fadeIn(100, callback).fadeIn(100);
}); 

$('body').on('click', 'li.next', function() {
    $("body").find( "li" ).eq( 1 ).removeClass("prev")
    $(this).prev().removeClass().addClass("prev");
    $(this).removeClass().addClass("main");
    $(this).next().removeClass().addClass("next");

    var $this = $(this),
        callback = function() {
            $this.siblings(':first()').insertAfter($this.siblings(':last()'));
        };
    $this.fadeOut(100, callback).fadeIn(100);
}); 

这里是 in extenso:

https://jsfiddle.net/mptjsybq/

--

此外，有没有办法为 .prev/.next li 提供更多 margin-top？我正在尝试，但它必须是某种对齐方式，可以将所有 li 排序到最高的 li。我希望 .main li 的位置高于 .prev/.next。

Answer 1

使用 CSS 过渡效果很容易实现。

关键是这行代码:

.view ul li {
    /* ... */
    transition: all 0.5s ease;
}

当然，如果你想对浏览器特别友好，你总是可以这样做:

.view ul li {
    /* ... */
    transition: margin-left 0.5s ease, margin-right 0.5s ease;
}

这样浏览器只需要计算 margin-left 和 margin-right，而不是所有的属性。

不要忘记从您的 jQuery 中删除 fadeIn 和 fadeOut!

这是 JSFiddle 上的演示:https://jsfiddle.net/239pcojn/2/

CSS3 Transitions 是一个了不起的规范，它允许您在没有 JavaScript 的情况下制作各种动画。您可以在此处查看文档: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions