oUL.style.left = (oUL.offsetLeft-1)+'px';},100);怎么是向右移动的？

oUL.style.left = (oUL.offsetLeft-1)+'px';},100);怎么是向右移动的？
明明该是向左移动的offsetLeft

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    .container{
    position:relative;
    margin:50px auto 0px;
    width:620px;
    height:170px;
    border:1px solid  #797979;}
    #button_left{
    display:block;
    width:65px;
    height:70px;
    position:absolute;
    left:0;
    top:50px;
    background:url(images/btn.jpg) -70px 0px no-repeat;}
    #button_right{
    width:65px;
    height:70px;
    position:absolute;
    right:0;
    top:50px;
    display:block;
    background:url(images/btn.jpg) 0px 0px no-repeat;}
    .content{
    width:480px;
    height:150px;
    padding:5px;
    position: relative;
    overflow:hidden;
    margin:0 auto;}
    .container ul{
    margin:5px;
    padding:0px;
    position: absolute;
    top:0;
    left:0;}
    .container ul li{
    list-style:none;
    float: left;
    width:161px;
    text-align:center;
    }
    .container ul li img{
    padding:1px;
    border:1px solid #CCC;}
    </style>
    <script>
    window.onload = function()
    {
    var oBleft = document.getElementById('button_left');
    var oBright = document.getElementById('button_right');
    var oUL = document.getElementById('content').getElementsByTagName('ul')[0];
    var oLi = oUL.getElementsByTagName('li');
    oUL.style.width = oLi.length*oLi[0].offsetWidth+5+'px';
    oBleft.onmouseover = function(){
    setInterval(function(){
    oUL.style.left = (oUL.offsetLeft-1)+'px';},100);
    };
    };
    </script>
    </head><body>
    <div class="container">
    <a href="javascript:void(0)" id="button_left"></a>
        <a href="javascript:void(0)" id="button_right"></a>
        <div class="content" id="content">
            <ul>
                <li><img src="images/010.gif"></li>
                <li><img src="images/020.gif"></li>
                <li><img src="images/030.gif"></li>
                <li><img src="images/040.gif"></li>
            </ul>
        </div>
        <div style="clear:both"></div>
    </div>
    </body>
    </html>
      

  2.   

    .container ul{
        margin:5px;
        padding:0px;
        position: absolute;
        top:0;
        left:0;}
    把这里margin:5px;去掉就行了 它会影响实际定位 而且你用了觉得定位就没必要用它了
      

  3.   

    如果你不想去掉margin 就把 -1 改成 -6 就是要把那5像素考虑进去
      

  4.   


    真的可以，能说说为什么margin值回影响吗
      

  5.   


    你可以自己测试一下 设置left值 然后设置margin值 看看最终效果是怎么样