jquery - 无法使用 CSS + jQuery 设置左侧

Question

我正在尝试使用基于 http://www.queness.com/post/923/create-a-simple-infinite-carousel-with-jquery 的 JQuery 实现轮播. 它几乎可以正常工作。只有当我向左和向右滑动时，我才不会回到我的初始位置。通过调试我发现我的 ul 元素中没有设置左集。代码:

Javascript

var container = $('#calendarContainer ul');
var moveWidth = container[0].clientWidth / 3;
var currentIndent = container.position().left;


if (event.type == "swipeleft") {
   $('#calendarContainer ul').css('left', currentIndent - moveWidth);
}
if (event.type == "swiperight") {
   $('#calendarContainer ul').css('left', currentIndent + moveWidth);
}

HTML

<div id="calendarContainer" >
    <ul>
        <li id ="calendarDivLeft">
            <fieldset id="calendarWeekGridLeft" class="ui-grid-a"></fieldset>
        </li>
        <li id ="calendarDiv" >
            <fieldset id="calendarWeekGrid" class="ui-grid-a"></fieldset>
        </li>
        <li id="calendarDivRight">              
            <fieldset id="calendarWeekGridRight" class="ui-grid-a"></fieldset>
        </li>
    </ul>
</div>

CSS

#calendarContainer ul 
{
     width : 300%;
     list-style: none;
     padding:0px;
     left : 0%;
     position:relative;
     margin: 0px;
     padding: 0px;
 }

 #calendarContainer ul li
 { 
     width: 33.333%; 
     float:left;   
     position:relative;
     margin: 0px;
     padding: 0px;
 }

例如，如果当前左边为 5，我向左移动 594px，我希望左边为 -589。 相反，我得到了 585 的左转!如果我向右移动 595，左边变成 605 而不是 600。

这怎么可能？

Answer 1

试试这个:

$('#calendarContainer ul').css('left', function(index, oldValue){
    var newValue = oldValue - moveWidth;
    return newValue;
});

css() function 可以接受一个函数，其参数是集合中元素的索引和被引用属性的当前值。只需在此函数中进行数学计算并返回新值即可。