Javascript 更正自定义旋转木马的滑动动画

我甚至会和你分享我的代码

基本上，我有一个自下而上构建的旋转木马——现在，当展示多个产品时，它可以正常工作

当只显示一个产品时，动画跳转到IE（惊喜…）。有人知道我该怎么解决这个问题吗

我的jQuery用于滑动：

$(leftButton).click(function(){
    var item_width = 205;
    var left_indent = parseInt($('ul#carousel_ul').css('left')) + (item_width);
    var $currElement = $('ul#carousel_ul li:last');
    $($currElement).prependTo('ul#carousel_ul');
    $('ul#carousel_ul').css({'left':-left_indent});

    $('ul#carousel_ul:not(:animated)').animate({'left' : 0},carouselSpeed,function(){       
        $('#carousel_ul').css({'left':0}); //css fix
    }); 
});
$(rightButton).click(function(){ 
    var item_width = 205;
    var position = $('ul#carousel_ul').position();
    var left_indent = parseInt(position.left + item_width);

    $('ul#carousel_ul:not(:animated)').animate({'left' : left_indent},carouselSpeed,function(){
        var $currElement = $('ul#carousel_ul li:first'); 
        if ($.browser.msie) {
            $('ul#carousel_ul').css({'left':'11px'}); 
        } else {
            $('ul#carousel_ul').css({'left':'0px'}); 
        }

        $($currElement).hide().appendTo('ul#carousel_ul');
        $($currElement).show();
    });
    return false; 
});

和我的HTML：

<div id="carousel_inner">
    <ul id="carousel_ul">
        <li name="1"></li>
        <li name="2"></li>
        <li name="3"></li>
        <li name="4"></li>
        <li name="5"></li>
        <li name="6"></li>
        <li name="7"></li>
        <li name="8"></li>
        <li name="9"></li>
    </ul>
</div>

---

请尝试替换这段代码：

$('ul#carousel_ul:not(:animated)').animate({'left' : 0},carouselSpeed,function(){       
   $('#carousel_ul').css({'left':0}); //css fix
}); 

为此：

$('ul#carousel_ul').stop().animate({'left' : 0},carouselSpeed,function(){       
   $('#carousel_ul').css({'left':0}); //css fix
}); 

---

请尝试替换这段代码：

$('ul#carousel_ul:not(:animated)').animate({'left' : 0},carouselSpeed,function(){       
   $('#carousel_ul').css({'left':0}); //css fix
}); 

为此：

$('ul#carousel_ul').stop().animate({'left' : 0},carouselSpeed,function(){       
   $('#carousel_ul').css({'left':0}); //css fix
}); 

---

用于在此处获取css左值的代码：

var left_indent = parseInt($('ul#carousel_ul').css('left')) + (item_width);

将产生类似于100px而不是100的结果，因此您不能将其添加到项目的宽度中，因为这将导致某些数学结果，如100px+300，这是不正确的。试试这个：

var position = $('ul#carousel_ul').position();
var left_indent = parseInt(position.left + item_width);

position.left将返回对象的左侧位置，而position.top将返回顶部位置

• 参考：

---

用于在此处获取css左值的代码：

var left_indent = parseInt($('ul#carousel_ul').css('left')) + (item_width);

将产生类似于100px而不是100的结果，因此您不能将其添加到项目的宽度中，因为这将导致某些数学结果，如100px+300，这是不正确的。试试这个：

var position = $('ul#carousel_ul').position();
var left_indent = parseInt(position.left + item_width);

position.left将返回对象的左侧位置，而position.top将返回顶部位置

• 参考：

---

尝试这样的绝对位置：

ul#carousel_ul {
    position:absolute;
    left:0;
    list-style-type: none; 
    margin: 0 auto;
    padding: 0;
    width:9999px; /* important */
    height: 115px;
    min-height: 115px;
    bottom: 35px;
    z-index: 75;
}

---

你在哪里写的/*important*/你不是指

！重要信息

？？注意-您的carousal现在可能定位错误，但至少要测试一下，看看它是否能使用上述css正常工作…

尝试这样的绝对位置：

ul#carousel_ul {
    position:absolute;
    left:0;
    list-style-type: none; 
    margin: 0 auto;
    padding: 0;
    width:9999px; /* important */
    height: 115px;
    min-height: 115px;
    bottom: 35px;
    z-index: 75;
}

---

你在哪里写的/*important*/你不是指

！重要信息

？？注意-您的旋转木马现在可能定位错误，但至少要测试一下它是否能与上述css一起正常工作…

不幸的是，这不起作用，我也不能使用

stop（）

，因为旋转木马无法在动画完成之前启动动画：）不幸的是，这不起作用，我也不能使用

stop（））

由于旋转木马无法在动画完成之前启动动画：）好的，谢谢-这并没有改变代码的工作方式-它仍在进行6-10px的跳转：（您是否也更改了顶部附近的问题，即var left_indent=parseInt（$（'ul#carousel_ul'））.css（'left'））+（item_width）；因为它也是错误的，如果它不能正确确定位置，这可能是这里的问题…另外，在iE6和IE7中，绝对定位项目可能会做一些奇怪的事情，请尝试添加一个明确的：无；和一个浮点：左；在你的

css中，我知道它不适用于绝对项目，但相信我，它可以创造奇迹！好的，谢谢你-这还没有尽管如此，代码的运行方式仍然存在着6-10px的跳跃。：（您是否也改变了顶部附近的问题，上面说var left_indent=parseInt（$（'ul#carousel_ul'）.css（'left'））+（item_width）；因为它也是错误的，如果它没有正确确定位置，这可能是这里的问题…另外，在iE6和IE7中，绝对定位的项目可能会做一些奇怪的事情，尝试添加一个清晰的：无；和一个浮点：左；到你的
css中，我知道它不适用于绝对位置的项目，但相信我，它会产生奇迹！相对定位的项目最常见当然支持“left”属性。只是它相对偏移而不是绝对偏移。此外，0px是完全有效的语法。@trafalmorian-你确实是对的，给我一些新东西，1+给你，谢谢这是最好的部分，所以，总是要学习新东西：）愉快的编码！谢谢，工作得很好。哦，我是说我键入的内容很重要-这是一个心理提示：）相对位置的项肯定支持“left”属性。只是它相对抵消了，而不是绝对抵消。此外，0px是非常有效的语法。@trafalmorian-你确实是对的，告诉我一些新的东西，1+给你，谢谢这是最棒的部分，总是需要学习的新东西：）编码快乐！谢谢，做得很好。哦，我的意思是我输入的重要信息——这是一个心理提示：）