Question

我有一个内联的图片列表，我想要能够旋转。我一次只能显示五个，如果你点击中心以外的任何一个，那么一个移动到中心，其他人在屏幕上移动。

我编写了一个函数来使用.offsetLeft来获取一个按钮相对于另一个按钮的位置，并确定容器应该移动的方式。我希望我可以改变按钮的偏移量并将它们移动到容器中，但遗憾的是你只能用JavaScript来做到这一点。

所以我确定最好有一个窗口，并通过偏移差异改变容器后面的边距，这很有效。之后的第一次，每当我点击一张图片时，它就像它通过代码一样，但它不会改变容器的边距。

这是功能：

    var cur_position;
    function set_variables() 
    {
        cur_position = document.getElementById("button3");
    }

    function carousel(Event) 
    {
        console.log(cur_position);
        var clicked_element = Event.target;
        var tray_bar = document.getElementById("button_tray");
        var num = 0;

        console.log(clicked_element.offsetLeft);
        clicked_element.offsetLeft = cur_position.offsetLeft - clicked_element.offsetLeft;
        console.log(clicked_element.offsetLeft);

        console.log(cur_position.offsetLeft);
        console.log(clicked_element.offsetLeft);

        if (clicked_element.offsetLeft < cur_position.offsetLeft) 
        {
            num = cur_position.offsetLeft - clicked_element.offsetLeft;
            console.log(cur_position.offsetLeft - num);
            document.getElementById("button_tray").style.marginLeft += num;

            cur_position = clicked_element;
            console.log(cur_position);
        }
        else
        {
            num = clicked_element.offsetLeft - cur_position.offsetLeft;
                console.log(num);
                tray_bar.style.marginLeft = tray_bar.style.marginLeft - num;

            cur_position = clicked_element;
            console.log(cur_position);
        }
    }

和正文中的代码：

        <div class="button-wrapper">
            <ul id="button_tray" class="buttons">
              <li id="button1" class="message-button" onclick="carousel(event)"><div></div></li>
              <li id="button2" class="link-button" onclick="carousel(event)"><div></div> </li>
              <li id="button3" class="live-button" onclick="carousel(event)"><div></div> </li>
              <li id="button4" class="social-button" onclick="carousel(event)"><div></div></li>
              <li id="button5" class="ppt-button" onclick="carousel(event)"><div></div> </li>
              <li id="button6" class="test-1" onclick="carousel(event)"><div></div></li>
              <li id="button7" class="test-2" onclick="carousel(event)"><div></div></li>
              <li id="button8" class="test-3" onclick="carousel(event)"><div></div></li>
            </ul>
        </div>
    </div>

我真的想弄清楚为什么它只是第一次工作，甚至更好能够将图片内部相互移动。请用JavaScript而不是jQuery来保存答案。

Answer 1

我不知道这是否是唯一的问题，但是当您设置边距时，您不会考虑单位或样式的数据类型。有了这条线：

document.getElementById("button_tray").style.marginLeft += num;

首次访问marginLeft可能是一个空字符串，因此+= num可以正常使用。如果num设置为20，则浏览器可以将样式属性转换为20px。下一次，当您访问marginLeft时，您将返回"20px";添加20会导致"20px20"，这显然不是一个好的值。

我建议当你想要在margin属性中添加或删除时，你应该这样做：

var tray_bar = document.getElementById("button_tray");
var pixelMargin = parseInt(tray_bar.style.marginLeft, 10);
pixelMargin += num;
tray_bar.style.marginLeft = pixelMargin.toString() + 'px';

JavaScript函数仅在第一次单击时才更改元素的边距

1 个答案: