带有 JavaScript 的基本图像查看器答案

【问题标题】：Basic Image Viewer with javaScript带有 JavaScript 的基本图像查看器
【发布时间】：2017-01-10 13:28:39
【问题描述】：

我是 JavaScript 新手，我正在尝试通过编码来学习。我想制作一个带有“下一个”和“上一个”的基本图像查看器，您可以单击它们在包含十张图片的画廊中前后移动。所以我有我的 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 文件包含一个函数，可以加载不同的 pitures，并且 - 这是我的问题 - 通过抓取它们的宽度并更新 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，但你明白了。

当您按“下一个”或“上一个”时，您应该会得到以下结果：

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

让我感到困惑的是：如果您一直单击“返回”和“下一步”，相同的图片在第二轮中显示正常，所以它正在工作，但不是立即生效。任何帮助表示赞赏！谢谢，P。

【问题讨论】：

究竟是什么问题？图片宽度
是的，如果你看前三张图片，它们是居中的，并且“上一个”和“下一个”标签与角对齐（因为“容器”是包含所有这些元素的 div )，但如果你看最后两张图片，“下一张”和“上一张”是随机定位的。正如我所说，如果您继续前进和前进，问题就会消失。
所以，图像的宽度是不同的，我只希望它们居中而不考虑宽度
尝试不改变容器的宽度即删除document.getElementById("container").style.width = a + "px"声明
如果我这样做，图片都从同一点开始，与标签“上一个”对齐，“上一个”是静态的，“下一个”是静态的，图片不居中，这是我想要实现的.

标签： javascript html function width getelementbyid

【解决方案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;
 }

【讨论】：