是否有可能使环形交叉口显示5个元素而不是3个元素?

时间:2014-03-27 16:47:49

标签: javascript jquery jquery-roundabout

我使用环形插件作为一个无限的滑块,可以绕转。问题是我想要显示5个元素而不是3个。是否可以实现?也许有人试过这样的事情?

这是我到目前为止所拥有的。 http://jsfiddle.net/b9XZf/

$(function () {
    $('ul').roundabout({
        minZ: 10,
        maxZ: 30,
        minOpacity: 1,
        minScale: 0.1,
    });
});


ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    width: 970px;
    height: 350px;
}
li {
    text-align: center;
    cursor: pointer;
}
li img {
    max-width:100%;
    max-height:100%;
}

.monolith{
    text-align: center;
    position: absolute;
    opacity: 1;
    min-height: 300px;
    min-width: 1200px;
    top: 0px;
    left: 0px;
    background: red;
    z-index: 20;
}

1 个答案:

答案 0 :(得分:1)

你试过roundabout-shapes吗?形状称为"图8"虽然动画有点奇怪,但在一行中显示5个项目。

<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'figure8'
      });
   });
</script>

enter image description here

您也可以编写自己的形状:

$(function () {
    jQuery.extend(jQuery.roundaboutShapes, {
        gimmeFive: function(r, a, t) {  
            return {
                // Source: http://smartecharts.aftrix.com/carousel/index.html
                x: (Math.sin(r)>0) ? Math.sin(r/2) : Math.sin(r/2 + Math.PI), 
                y: (Math.sin(r + 3*Math.PI/2 + a) / 8) * t, 
                z: (Math.cos(r + a) + 1) / 2,
                scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5                
            };
        }
    });

    $('ul').roundabout({
        minZ: 19, // This value puts the 6th item behind the red <div> 
        maxZ: 30,
        minOpacity: 1,
        minScale: 0.1,
        shape: 'gimmeFive'
    });
});

结果:

enter image description here

http://jsfiddle.net/koldev/mYxBA/