我使用环形插件作为一个无限的滑块,可以绕转。问题是我想要显示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;
}
答案 0 :(得分:1)
你试过roundabout-shapes吗?形状称为"图8"虽然动画有点奇怪,但在一行中显示5个项目。
<script>
$(document).ready(function() {
$('ul').roundabout({
shape: 'figure8'
});
});
</script>
您也可以编写自己的形状:
$(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'
});
});
结果: