jquery - 是否可以使用回旋处插件获得此轮播？

Question

我正在使用环形交叉口插件为旋转木马设置动画，一切正常，但我无法获得与图像中相同的渲染，该渲染表示我想要的旋转木马外观，而此链接目前代表我的代码结果。

• http://www.hostingpics.net/viewer.php?id=316314cleansleekwebdesign.jpg
• http://onsixam.cfun.fr/roundabout.html

我使用了可用选项的插件值，但不幸的是仍然无法获得图像中的项目定位，我也想知道如何设置<li>尺寸。

我真的感到沮丧和不知所措，我不知道这是因为我不够聪明还是什么。

$(document).ready(function() {
    $('#sample-roundabout').roundabout({
        tilt: 0.9,
        minScale: 1,
        maxsCale: 3,
        minOpacity: 1,
        duration: 400
    }, function() {
        $(this).fadeTo(500, 1);
    });
});

Answer 1

严格使用 CSS，您可以执行以下操作：http : //jsbin.com/ezukov/1/edit#html,live

ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    width: 863px;
    height: 300px;
}
li {
    height: 220px;
    width: 621px;
    background-color: #ccc;
    text-align: center;
    cursor: pointer;
}
    li.roundabout-in-focus {
    margin-top:50px;
    background:red;
    cursor: default;
}

更进一步，您可以创建回调函数以在中间幻灯片执行lazysusan 动画之前平滑地为中间幻灯片设置动画。或者，如果您想要不同的东西，您可以创建自己的环形交叉路口形状动画。

Answer 2

您需要将 ul 的宽度设置为较小的值，对于您想要获得的内容，请在 CSS 样式表中尝试这样的操作：

#sample-roundabout{
  width: 400px;
}

只是玩弄这个值和倾斜度，我认为你不会很难让它发挥作用。