1

だから私は次のようなli要素の束を持っています：

<div id="previous_button">
    <a href="javascript:void(0)" id="previous">Previous</a>
</div>
<div id="slider-stage">
    <ul id="slider-list">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
        <li>Fourth</li>
        <li>Fifth</li>
        <li>Sixth</li>
    </ul>
</div>
<div id="next_button">
    <a href="javascript:void(0)" id="next">Next</a>
</div>

そしてCSS：

#slider-stage
{
    float: left;
    width:825px;
    overflow:auto;
    overflow-x:hidden;
    overflow-y:hidden;
    height:235px;
    margin:0 auto;
}

#slider-list
{
    width: 1200px;
    border:0;
    margin:0;
    padding:0;
}

#slider-list li
{
    list-style:none;
    margin:0;
    padding:0;
    border:0;
    margin-right:15px;
    background: grey;
    background-size: 150px 235px;
    float:left;
    width:150px;
    height:235px;
}
#previous_button
{
    float: left;
    height: 235px;
    margin-right: 15px;
}
#next_button
{
    float: left;
    height: 235px;
    margin-right: 15px;
}

左マージンが変更されると、スライダーリスト全体が移動します。

window.addEvent('domready', function()
{ 
    var totIncrement = 0;
    var increment = 165;
    var maxRightIncrement = increment*(-2);
    var fx = new Fx.Tween('slider-list',
    {    
        duration: '500',
        property: 'margin-left'
    });
    // Previous Button
    document.id('previous').addEvent
    ('click', function(event)
    { 
        if(totIncrement<0)
        { 
            totIncrement = totIncrement + increment;
            fx.start(totIncrement);
        }
    }); 
    // Next Button
    document.id('next').addEvent
    ('click', function(event)
    { 
        special = special + 1;
        if(totIncrement>maxRightIncrement)
        { 
            totIncrement = totIncrement - increment;
            fx.start(totIncrement);
        }
    });
}); ​

新しい要素を最後に追加したとき、および最初に追加しようとしたときに問題はありません-スライダーリストが移動します。理由は明らかですが、これを回避する方法はありますか？

4

1 に答える 1

0

新しい要素をリストの先頭に追加するときは、新しい要素margin-leftの幅だけ を減らします。効果的に右に 1 回スクロールしたように見せかけて、スライダーを同じ位置に保ちます。

$('new').addEvent('click', function(event) {
    Element('<li>New</li>', {text: 'New'})
        .inject($('slider-list'), 'top');
    $('slider-list').setStyle('margin-left', $('slider-list').getStyle('margin-left').toInt() - 165);
    totIncrement -= 165;
});

http://jsfiddle.net/kelervin/aZJTu/

于 2012-11-08T03:03:58.247 に答える