2

我的代码是

<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反复减少。

请帮帮我~

4

2 回答 2

0

即使您正在重置 css left 属性，您仍然在动画对象一直到“left1”：

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

您应该在“if”中更新 left1：

if(left1 <= -600){
    szSliderMoveSet.css({"left":"600px"});
    left1 = 600;
}
于 2013-06-14T06:17:03.223 回答
0

试试这个：- 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();

});
于 2013-06-14T06:18:55.373 回答