Question

我是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文件包含一个加载不同缺陷的函数 - 这是我的问题 - 通过抓取它们的宽度并更新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。

Answer 1

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

fpin

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

使用javaScript

1 个答案: