所以我找到了这个有用的jQuery内容轮播(http://tympanus.net/Development/CircularContentCarousel/),我一直在寻找它。
我已将代码修改为从三个框显示为五个框:http://helpmyedu.com/test/
但是,当我单击"更多"时,我不知道在哪里修改div - ca-content-wrapper的宽度,以便在单击"更多"时使其全宽!
感谢您的帮助!
更新-------------------------------------到目前为止,我已经设法显示扩展项目显示正确,并关闭前三个项目正确...
但是,当我关闭扩展项目时,右侧的最后两个手边不显示原始项目(请参阅链接对于我在说什么)。
此外,当扩展窗口打开时,当我有空格时尝试向左或向右导航。
请帮忙
在jquery.contentcarousel.js中,使用chrome developer或Firebug,在CTRL+F之后查找ca-content-wrapper。
当你找到这个时,你有
openItem : function( $wrapper, $item, opts, cache ) {
cache.idxClicked = $item.index();
// the item's position (1, 2, or 3) on the viewport (the visible items)
cache.winpos = aux.getWinPos( $item.position().left, cache );
$wrapper.find('div.ca-item').not( $item ).hide();
$item.find('div.ca-content-wrapper').css( 'left', cache.itemW + 'px' ).stop().animate({
width : cache.itemW * 2 + 'px',
left : cache.itemW + 'px'
}, opts.itemSpeed, opts.itemEasing)
.end()
.stop()
.animate({
left : '0px'
}, opts.itemSpeed, opts.itemEasing, function() {
cache.isAnimating = false;
cache.expanded = true;
aux.openItems( $wrapper, $item, opts, cache );
});
},
你可以看到:
width : cache.itemW * 2 + 'px',
尝试在此 js 文件上修改此值。
另外,你必须更改以下代码:
switch( val ) {
case 0 : return 1; break;
case cache.itemW : return 2; break;
case cache.itemW * 2 : return 3; break;
}
并为要在内容包装器中显示的每个项目添加一行,在这种情况下,我想显示 4 个项目,如下所示:
switch( val ) {
case 0 : return 1; break;
case cache.itemW : return 2; break;
case cache.itemW * 2 : return 3; break;
case cache.itemW * 3 : return 4; break;
}