如何让jQuery循环容器的宽度与下一个幻灯片宽度相同?

时间:2012-07-31 15:03:01

标签: javascript jquery plugins width cycle

我会尝试更具体:

我有这个html标记片段:

<div id="slider">
<ul>
<li>first slide</li>
<li>secondth slide</li>
<li>third slide</li>
<li>fourth slide</li>
</ul>
</div>

和这个js snipett来激活循环

$('#slider ul').cycle({ 
    easing: 'easeInBounce',
    fx: 'scrollUp',
    speed:400,
    timeout:5000
});

现在我想让#slider ul width自动计算与其ul li元素相同。

希望你们明白我的意思!

谢谢!

1 个答案:

答案 0 :(得分:0)

编辑:

好的,所以你可以在之前(或回调之后)使用:

HTML:

Ul width: <input type="text" id="ulwidth" />
<div id="slider">
<ul>
<li style="width: 150px">first slide</li>
<li style="width: 230px">secondth slide</li>
<li>third slide</li>
<li>fourth slide</li>
</ul>
</div>

和JS:

$('#slider ul').cycle({ 
    fx: 'fade',
    before: function(curr, next, option){ // or after: function...
           //console.log(curr.style.width);
           var w = curr.style.width; // or next.style.width
           $('#slider ul').css({'width': w});
           $('#ulwidth').val($('#slider ul').width());
    }
});

这可以根据下一个或当前的li(使用之后或之前)拟合ul宽度:EXAMPLE