javaScript 的基本图像查看器

Question

我是 JavaScript 的新手，我正在尝试通过编码来学习。我想制作一个带有 "next" 和 "previous" 的基本图像查看器，您可以单击它在包含十张图片的画廊中前后移动。所以我有 html、css 和 javaScript 文件以及 10 张随机图片来试用。这些文件非常简单：

HTML:

<body>
    <div id="wrap">
        <div class="firstColumn">
            <p>PHOTOGRAPHY</p>
            <div class="firstColumnSub">
                <p class="photo">SOME TITLE</p>
            </div>
        </div>
        <div class="back">
            <p><a href="index.html">BACK</a></p>
        </div>
        <div id="container">
            <div id="controllers">
                <div class="buttons" id="previous">
                    <p onclick="change(-1);">PREVIOUS</p>
                </div>
                <div class="buttons" id="next">
                    <p onclick="change(1);">NEXT</p>
                </div>
            </div>
            <div><img height="100%" id="front" src="Image1.jpg"></div>
            <div>
                <p id="footer">Footer</p>
            </div>
        </div>
    </div>
</body>

只有几个 div，中间有图片，还有一个和一个可点击的标签。这就是它的样子：

JavaScript 文件包含一个加载不同图片的函数，并且 - 这是我的问题 - 通过获取它们的宽度并更新 css 将它们居中放置在页面中间：

JavaScript:

window.onload = function setUp() {
    var b = document.getElementById("front").width;
    document.getElementById("container").style.width = b + "px"
}

var imageCount = 1;

function change(x) {
    imageCount = imageCount + x;
    var image = document.getElementById('front');
    var str1 = "Image";
    var str2 = imageCount;
    var str3 = ".jpg"
    var sum = str1.concat(str2, str3);
    image.src = sum;
    var a = document.getElementById("front").width;
    document.getElementById("container").style.width = a + "px"
}

除非需要，否则我不会发布 css，但你明白了。

当您按 "next" 或 "previous" 时，您应该得到以下结果：

等等...但是我得到了各种随机显示：

这是让我困惑的事情：如果你一直点击 "back" 和 "next"，相同的图片在第二次出现时正常，所以它可以工作但不是立即。任何帮助表示赞赏！谢谢，P.

Answer 1

这很可能是 CSS 定位问题。以下 CSS 可能会为您完成这项工作。如果您需要进一步的帮助，那么我建议您重新考虑发布您的 CSS 以获得帮助。

 #container #front
 {
    position: relative;
    /* width: 0px;  */ /* set via JS for each element in this use case */
    left: 0;
    right: 0;
    margin: 0 auto;
 }

Here is a popular Q & A on this subject which contains a lot of resources.

javaScript 的基本图像查看器

Basic Image Viewer with javaScript

html

javascript

function

getelementbyid

width