我正在制作一个图像滑块，但只有第一张图像显示它不显示其余的答案

【问题标题】：I'm making an image slider but only the first image displays it does not display the rest我正在制作一个图像滑块，但只有第一张图像显示它不显示其余的
【发布时间】：2016-07-18 13:19:41
【问题描述】：

我正在制作一个图像滑块，其中的图像名称以数字 1 到 5 结尾，但只显示第一张图像。路径很好，我尝试单独显示每张图片并且效果很好......

<head>

<title>jQuery Image Slider</title>

<script src = "jquery-3.0.0.js"></script>

<style>

    #container {
        height: 300px;
        width: 1350px;
        margin: 20px auto;
        position: relative;
    }

    #img {
        height: 300px;
        width: 1350px;
        position: absolute;
    }

    #left-holder {
        height: 100px;
        width: 100px;
        position: absolute;
        left: 0px;
        top: 100px;
    }

    #right-holder {
        height: 100px;
        width: 50px;
        position: absolute;
        right: 0px;
        top: 100px;
    }

    .left {
        height: 50px;
        width: 50px;
        position: absolute;
        top: 40%;
        left: 0px;
    }

    .right {
        height: 50px;
        width: 50px;
        position: absolute;
        top: 40%;
        left: 0px;
    }

</style>

<script>

    var imageCount = 1;
    var totalImages = 5;

    function slide(x) {
        var Image = document.getElementById("img");
        imageCount = imageCount + x;
        if (imageCount > totalImages)
            imageCount = 1;
        if (imageCount < 1)
            imageCount = totalImages;
        Image.src = "E:\JavaScript work\Web Project\carousel"+imageCount+".jpg";
    }

    window.setInterval(function slideAuto() {
        var Image = document.getElementById("img");
        imageCount = imageCount + 1;
        if (imageCount > totalImages)
            imageCount = 1;
        if (imageCount < 1)
            imageCount = totalImages;
        Image.src = "E:\JavaScript work\Web Project\carousel"+imageCount+".jpg";
    }, 1000);

</script>

</head>

<body>

    <div id = "container">

        <img id = "img" src = "E:\JavaScript work\Web Project\carousel1.jpg" />

        <div id = "left-holder">
            <img class = "left" onClick = "slide(-1)" src = "E:\JavaScript work\Web Project\left.png" />
        </div>

        <div id = "right-holder">
            <img class = "right" onClick = "slide(1)" src = "E:\JavaScript work\Web Project\right.png" />
        </div>

    </div>

</body>

【问题讨论】：

标签： javascript html css

【解决方案1】：

问题：您在src 中使用了反斜杠\。 Javascript 使用反斜杠进行转义。

Image.src = "E:\JavaScript work\Web Project\carousel"+imageCount+".jpg";

解决方案：要么使用正斜杠/，或者如果你仍然想使用反斜杠，你可以使用\\

【讨论】：

【解决方案2】：

改为这个

Image.src = "E:\JavaScript work\Web Project\carousel"+imageCount+".jpg";

使用这个：

Image.src = "E:\\JavaScript work\\Web Project\\carousel"+imageCount+".jpg";

最好在图片 src 中使用相对地址。

【讨论】：