问题是，尽管图像的样式发生了变化，但图像不会向左移动

我想在单击按钮时向左和向右移动图像。问题是，尽管图像的样式正在更改，但图像不会向左移动。我希望有人能帮助我。

var imgObj;
var currentWidth = 1;
var speed = 50;
var direction;
function init() {
    "use strict";
    imgObj = document.getElementById('myImage');
    imgObj.style.position = 'relative';
    imgObj.style.left = '0px';
}
function moveRight() {
    "use strict";
    direction = 1;
    currentWidth += (speed * direction);
    imgObj.style.left = currentWidth + 'px';
}
function moveLeft() {
    "use strict";
    direction = -1;
    currentWidth += (speed * direction);
    imgObj.style.right = currentWidth + 'px';
}
window.onload = init;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title> Walking image</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>
<body>
    <form>
        <img id="myImage" src="https://placeimg.com/900/600/animals?t=1515065784396g" />
        <input type="button" value="Rechts" onclick="document.getElementById('myImage').src='https://placeimg.com/900/600/animals?t=1515065867693';moveRight()" />
        <input type="button" value="Links" onclick="document.getElementById('myImage').src='https://placeimg.com/900/600/animals?t=1515065784397';moveLeft()" />
    </form>
</body>
</html>

不要同时调整左右。只需使用其中之一。

在这里，两个按钮都调整左侧值。一个增加值，另一个减少。

var imgObj;
var currentWidth = 1;
var speed = 50;
var direction;
function init() {
    "use strict";
    imgObj = document.getElementById('myImage');
    imgObj.style.position = 'relative';
    imgObj.style.left = '0px';
}
function moveRight() {
    "use strict";
    direction = 1;
    currentWidth += (speed * direction);
    imgObj.style.left = currentWidth + 'px';
}
function moveLeft() {
    "use strict";
    direction = -1;
    currentWidth += (speed * direction);
    imgObj.style.left = currentWidth + 'px';
}
window.onload = init;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title> Walking image</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>
<body>
    <form>
        <img id="myImage" src="https://placeimg.com/900/600/animals?t=1515065784396g" />
        <input type="button" value="Rechts" onclick="document.getElementById('myImage').src='https://placeimg.com/900/600/animals?t=1515065867693';moveRight()" />
        <input type="button" value="Links" onclick="document.getElementById('myImage').src='https://placeimg.com/900/600/animals?t=1515065784397';moveLeft()" />
    </form>
</body>
</html>

图像不会向左移动，因为您必须更改imgObj.style.left，而不是imgObj.style.rigth：

var imgObj;
var currentWidth = 1;
var speed = 50;
var direction;
function init() {
    "use strict";
    imgObj = document.getElementById('myImage');
    imgObj.style.position = 'relative';
    imgObj.style.left = '0px';
}
function moveRight() {
    "use strict";
    direction = 1;
    currentWidth += (speed * direction);
    imgObj.style.left = currentWidth + 'px';
}
function moveLeft() {
    "use strict";
    direction = -1;
    currentWidth += (speed * direction);
    imgObj.style.left = currentWidth + 'px';
}
window.onload = init;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title> Walking image</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>
<body>
    <form>
        <img id="myImage" src="https://placeimg.com/900/600/animals?t=1515065784396g" />
        <input type="button" value="Rechts" onclick="document.getElementById('myImage').src='https://placeimg.com/900/600/animals?t=1515065867693';moveRight()" />
        <input type="button" value="Links" onclick="document.getElementById('myImage').src='https://placeimg.com/900/600/animals?t=1515065784397';moveLeft()" />
    </form>
</body>
</html>

相关内容

最新更新

热门标签：