代码之家 › 专栏 › 技术社区 › Barrie Reader

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

css html jquery javascript

Barrie Reader · 技术社区 · 14 年前

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

基本上,我有一个旋转木马,我建立了从下到上-现在,它的工作很好,当有超过展示的产品。

当只有一个产品显示,然后动画跳转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; 
});

<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>

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;
}

3 回复 | 直到 14 年前

SimonDowdles 14 年前

尝试这样的绝对位置:

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功能正常。。。

SimonDowdles 14 年前

尝试替换此代码:

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

SimonDowdles 14 年前

用于在此处获取css left值的代码:

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

将产生类似100px而不是100的值,因此不能将其添加到项目的\u宽度中,因为这将导致某些数学结果,如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/