Question

我正在尝试通过实际的上一张/下一张幻灯片触发前一个/下一个动作的旋转木马。

我可以让它发挥作用，但我希望幻灯片能够以动画过渡方式移动。我只能想出一个fadeIn / FadeOut效果，它并没有完全削减它。

有没有什么可以建议我顺利移动.prev / .next＆gt; 。单击.prev / .next后的。？

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命令到最高的一个。我希望.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

Answer 2

你要问的是很复杂，因为有很多事情需要考虑。

另一种选择是在现有滑块之上构建您要查找的功能。像这样：http://jsfiddle.net/mmyp7n3j/2/

HTML：

<div id="container" style="width: 100%;overflow: hidden;">
    <div style="position:relative;width: 50%;margin: 0 auto;">
        <div id="slider" style="width: 100%;overflow: visible !important;">
            <img src="http://webbies.dk/assets/files/SudoSlider/package/images/01.jpg" alt="img" />
            <img src="http://webbies.dk/assets/files/SudoSlider/package/images/02.jpg" alt="img" />
            <img src="http://webbies.dk/assets/files/SudoSlider/package/images/03.jpg" alt="img" />
            <img src="http://webbies.dk/assets/files/SudoSlider/package/images/04.jpg" alt="img" />
            <img src="http://webbies.dk/assets/files/SudoSlider/package/images/05.jpg" alt="img" />
        </div>
    </div>
</div>

JavaScript：

$(document).ready(function(){
    var sudoSlider = $("#slider").sudoSlider({
        continuous:true,
        prevNext: false,
        initCallback: function () {
            this.css("overflow", "visible");
        }
    });

    $("body").on("click", ".slide", function (e) {
        var slide = Number($(e.target).attr("data-slide"));
        sudoSlider.goToSlide(slide);
    });
});

（免责声明，我是使用插件背后的人）。

您可以在插件网站上找到更多文档：http://webbies.dk/SudoSlider/

没有按钮的滑块 - 前/下一个li触发幻灯片

2 个答案: