Question

我正在创建一个图像滑块，其图像的名称以数字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>

Answer 1

问题：您在\中使用反斜杠src。 Javascript使用反斜杠来逃避。

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

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

Answer 2

而不是这个

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

使用它：

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

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

我正在制作一个图像滑块，但只有第一个图像显示它不会显示其余部分

2 个答案: