Question

我试图将以下多项旋转木马平滑地滚动到下一个项目。现在，它在点击时跳转到下一个项目，但我希望它能够过渡/轻松 - 或者顺利 - 转到下一部分。

<style>
body {
    width: 1400px;    
}
.Blog {
    position: relative;
    background-color: #000;
}

.inner {
    overflow: hidden;
    font-size: 0;
    white-space: nowrap;
}

.Blog-item {
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    display: inline-block;
}

.controlDiv {
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    text-align: center;
}

.control {
    color: #fff;
    font-size: 20px;
    display: inline-block;
    padding: 4px;
}
</style>

<div class="Blog">
    <div class="inner">
        <div class="Blog-item" >
            <img src="http://placehold.it/727x356?text=1" alt="" />
        </div>
        <div class="Blog-item">
            <img src="http://placehold.it/727x356?text=2" alt="" />
        </div>
        <div class="Blog-item">
            <img src="http://placehold.it/727x356?text=3" alt="" />
        </div>
        <div class="Blog-item">
            <img src="http://placehold.it/727x356?text=4" alt="" />
        </div>
        <div class="Blog-item">
            <img src="http://placehold.it/727x356?text=5" alt="" />
        </div>
        <div class="Blog-item">
            <img src="http://placehold.it/727x356?text=6" alt="" />
        </div>
    </div>
    <div class="controlDiv">
        <a class="control control-left glyphicon glyphicon-menu-left" href=""></a>
        <a class="control control-right glyphicon glyphicon-menu-right" href=""></a>
    </div>
</div>
<script>
$(document).ready(function () {
    $('.control-right').click(function () {
        $(this).blur();
        $(this).parents('.Blog').find('.Blog-item').first().insertAfter($(this).parents('.Blog').find('.Blog-item').last());
        return false;
    });
    $('.control-left').click(function () {
        $(this).blur();
        $(this).parents('.Blog').find('.Blog-item').last().insertBefore($(this).parents('.Blog').find('.Blog-item').first());
        return false;
    });
});
</script>

这里是小提琴：http://jsfiddle.net/bcw8dysawk/z1wo4uy6/3/

Answer 1

如果我理解正确，我认为你是在追求这样的事情：

http://jsfiddle.net/uh2skm0e/

我基本上使用jQuery的animate函数来动画页面上的元素，并将原始代码的修改版本插入到animate的回调函数中。

我通过修改margin-left css属性来修改left css属性和'上一张幻灯片'操作，从而完成了“下一张幻灯片”操作。

您可以看到这两个选项并选择您喜欢的方法（通常使用left）。

我还需要在position:relative css规则中添加.Blog-item，因为脚本操作z-index，这需要元素具有明确的CSS位置。

要提两件事：

1）我的解决方案是纯JavaScript解决方案。你可以考虑使用transition CSS属性来实现动画而不需要JavaScript，但是你可能需要稍微重新组织你的代码（这会引导我进入下一点）

2）通常使用滑块，标记中的元素位置实际上没有改变...它只是被更改的可见性设置（display CSS属性）。因此，当显示“幻灯片2”时，除“幻灯片2”外，所有幻灯片都设置为display:none。这意味着您需要做的就是使用JavaScript将类添加到可见幻灯片中，它将显示...将其与transition CSS属性相结合，您可以轻松实现一些好的效果。

请告诉我这是你所追求的。

Bootstrap多列旋转木马平滑滚动/缓动

1 个答案: