Question

我想在点击按钮时向左和向右移动图像。问题是尽管图像的样式正在改变，但图像没有向左移动。我希望有一个人可以帮助我。

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>

Answer 1

不要左右调整。只需使用其中一个。

此处两个按钮均调整左侧值。一个增加值，另一个减少。

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>

Answer 2

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

＆＃13;

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;

＆＃13;

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

＆＃13;

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

2 个答案: