Question

我甚至会与您分享我的代码！

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

当只显示一个产品时，动画会在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>

最后，我的CSS：

div#carousel_inner {
    float:left; 
    width:205px;
    height: 125px;
    min-height: 115px;
    margin-left: 25px;
    position: relative;
    overflow: hidden; 
    z-index: 75;
}
ul#carousel_ul {
    position:relative;
    left:0px;
    list-style-type: none; 
    margin: 0 auto;
    padding: 0px;
    width:9999px; /* important */
    height: 115px;
    min-height: 115px;
    bottom: 35px;
    z-index: 75;
}

Answer 1

尝试这样的绝对位置：

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 * /你的意思不是!important ??注意 - 您的转盘现在可能位置错误，但至少要测试一下是否正确使用上述css进行功能...

Answer 2

尝试替换这段代码：

$('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
});

Answer 3

您在此处使用css保留值的代码：

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

会产生100px而不是100的东西，所以你不能将它添加到你的item_width，因为这会导致像100px + 300这样的数学不正确。试试这个：

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

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

参考：http://api.jquery.com/position/

更正自定义轮播的滑动动画

3 个答案: