Question

我的代码是

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript" src="jquery1.6.4.js"></script>
<script>
$(document).ready(function(){

//Slide Test

$("#szSliderContainer").css({"width":"1200px","height":"200px","position":"relative","overflow":"hidden"});
var szSliderMoveSet = $("#szSliderMoveSet").css({"width":"600px","height":"100px","position":"relative"});

function szSlide(){

    console.log("left-chk1 : " + szSliderMoveSet.position().left);
    var left1 = szSliderMoveSet.position().left - 100;

    if(left1 <= -600){
        szSliderMoveSet.css({"left":"600px"});
    }

    console.log("left-chk2 : " + szSliderMoveSet.position().left);
    szSliderMoveSet.delay(500).animate({'left':left1},500,szSlide);

}

szSlide();

});

</script>
</HEAD>

<BODY>
<div id="szSliderContainer">
<div id="szSliderMoveSet">
<table width="400" cellpadding="0" cellspacing="0">
<tr>
<td><img src="img/img1.jpg" width="100" height="100"/></td>
<td><img src="img/img2.jpg" width="100" height="100"/></td>
<td><img src="img/img3.jpg" width="100" height="100"/></td>
<td><img src="img/img4.jpg" width="100" height="100"/></td>
<td><img src="img/img5.jpg" width="100" height="100"/></td>
<td><img src="img/img6.jpg" width="100" height="100"/></td>
</tr>
</table>
</div>
</div>
</BODY>
</HTML>

当szSliderMoveSet Div的左侧位置为-600时，我希望szSliderMoveSet Div的左侧位置为600然后左侧位置减少-100（500,400,300 ......）

但是......没有按预期工作

控制台输出是：

left-chk1 : 0 
left-chk2 : 0 
left-chk1 : -100 
left-chk2 : -100 
left-chk1 : -200 
left-chk2 : -200 
left-chk1 : -300 
left-chk2 : -300 
left-chk1 : -400 
left-chk2 : -400 
left-chk1 : -500 
left-chk2 : 600 
left-chk1 : -600 
left-chk2 : 600 
left-chk1 : -700 
left-chk2 : 600 
left-chk1 : -800 
left-chk2 : 600 
left-chk1 : -900 
left-chk2 : 600 
left-chk1 : -1000 
left-chk2 : 600 
left-chk1 : -1100 
left-chk2 : 600 
left-chk1 : -1200

left-chk1反复减少。

请帮帮我〜

Answer 1

即使您正在重置css left属性，您仍然可以将对象一直设置为“left1”：

szSliderMoveSet.delay(500).animate({'left':left1},500,szSlide);

你应该在“if”：

里面更新left1

if(left1 <= -600){
    szSliderMoveSet.css({"left":"600px"});
    left1 = 600;
}

Answer 2

试试这个： - http://jsfiddle.net/adiioo7/Ep2ar/

<强> JS： -

$(document).ready(function () {

    //Slide Test

    $("#szSliderContainer").css({
        "width": "1200px",
        "height": "200px",
        "position": "relative",
        "overflow": "hidden"
    });
    var szSliderMoveSet = $("#szSliderMoveSet").css({
        "width": "600px",
        "height": "100px",
        "position": "relative"
    });

    function szSlide() {

        console.log("left-chk1 : " + szSliderMoveSet.position().left);
        var left1 = szSliderMoveSet.position().left - 100;

        if (left1 <= -600) {
            szSliderMoveSet.css({
                "left": "600px"
            });
        }

        console.log("left-chk2 : " + szSliderMoveSet.position().left);
        szSliderMoveSet.delay(500).animate({
            'left': szSliderMoveSet.position().left-100
        }, 500, szSlide);

    }

    szSlide();

});

jquery position（）。left无法正常工作

2 个答案:

试试这个： - http://jsfiddle.net/adiioo7/Ep2ar/