javascript - 我正在制作一个图像 slider ，但只有第一张图像显示它不显示其余图像-6ren

javascript - 我正在制作一个图像 slider ，但只有第一张图像显示它不显示其余图像

转载作者：行者123 更新时间：2023-11-28 05:32:40

25

4

我正在制作一个图像 slider ，其中包含名称以数字 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>

最佳答案

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

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

解决方案:要么使用正斜杠 /，要么如果您仍想使用反斜杠，则可以使用 \\

关于javascript - 我正在制作一个图像 slider ，但只有第一张图像显示它不显示其余图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38428717/

25

4

0

文章推荐： c++ - -1、+1 的所有组合的 vector 的 vector

文章推荐： c++ - 客户端和服务器无法交换数据，因为都得到 "stuck"

文章推荐： c++ - QuickFIX 和 MFC : cannot login using Initiatior. logon() 函数

文章推荐： html - Bootstrap 移动垂直间距

jquery - 正/负最大值输入
我有一个加号/减号按钮，希望用户不能选择超过 20 个但不知道如何让它工作。我尝试使用 min="1"max="5 属性，但它们不起作用。这是我的代码和一个 fiddle 链接。https://jsf
r - ggplot2 正/负图无法清晰呈现
我正在尝试复制顶部底部图，如示例 here但它没有正确渲染(紫色系列有 +ve 和 -ve 值，绿色为负值)留下杂乱的人工制品。我也在努力创建一个玩具示例来复制这个问题，所以我希望尽管我缺乏数据，但有
google-maps - 正/负纬度和经度值与基本方向
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。这个问题似乎与 help center 中定义的范围内的编程无关。 . 已关闭 6 年前。社区去年审查了是
c++在添加两个绝对(正)值时得到负值
这个问题在这里已经有了答案: Adding two positive integers gives negative answer.Why? (4 个答案) 关闭 5 年前。我遇到了一个奇怪的问题
Java将负/正字符串数字转换为负/正 double
有谁知道如何将字符串值类型 -4,5 或 5,4 转换为 double -4.5 或 5.4? 最佳答案只需使用 Double.parseDouble(Locale, String); 糟糕，我很困
python - 在数据框中的新列中返回 TextBlob 正、负或中性分类
我正在尝试根据 TextBlob 分类插入一个仅包含“正”或“负”字符串的新数据框列:对于我的 df 的第一行，结果是 ( pos , 0.75, 0.2499999999999997)我想要' 正
VBA 循环根据相邻单元格更改单元格值(正/负)和字体颜色
我对 VBA 非常陌生，无法理解如何在一个循环中完成 2 个任务。我非常感谢您的帮助。我已经能够根据第 3 列中的数据更改第 2 列中的数值，但我不明白如何将负值的字体更改为红色。表格的大小每月都
jquery - 如何发送 "+"符号(加，正)
欢迎，我正在使用 jquery 通过 POST 发送表单。这就是我获得值(value)的方式。 var mytext = $("#textareaid").val(); var dataStrin
c# - 正 System.Double 值的快速下限和上限替代方案
double d = 0; // random decimal value with it's integral part within the range of Int32 and always p
javascript - 使用 Regex 正/负前瞻替换字符？
我有这个字符串: var a='abc123#xyz123'; 我想构建 2 个正则表达式替换函数: 1) 用 '*' 替换所有确实有 future '#'的字符(不包括'#') 所以结果应该是这样的
android - 如何将 DialogFragment 正/负按钮保留在软键盘上方
我正在使用 DialogFragment。当用户从 Gmail 平板电脑应用程序的屏幕与下面示例图片中的编辑文本进行交互时，我希望正面和负面按钮保持在键盘上方。在我的尝试中不起作用，这是我的 Dia
binary - 二进制补码； 0FFFFh 正，0FFFFh 负？
从组装艺术一书中，我复制了这句话: In the two’s complement system, the H.O. bit of a number is a sign bit. If the H.O
c++ - 基于数值(正、负、零)实现条件表达式的最佳方式
是否有更好更优雅的方法来实现下面的简单代码(diffYear、A 和 B 是数字): diffYear = yearA - yearB; if (diffYear == 0) { A = B
boolean true - 正 1 还是负 1？
我正在设计一种语言，并尝试确定 true 应该是 0x01 还是 0xFF。显然，所有非零值都将转换为 true，但我正在尝试确定确切的内部表示。每种选择的优点和缺点是什么？最佳答案没关系，只要
android - alertdialog 正/负按钮与全屏对话框 fragment 中的父级不匹配
在我的 dialogfragment 类的 OnCreateDialog 中，我正在这样做: AlertDialog.Builder builder = new AlertDialog.Builder
c++ - 正 lambda : '+[]{}' - What sorcery is this?
这个问题在这里已经有了答案: Resolving ambiguous overload on function pointer and std::function for a lambda usin
ios - 正 NSDecimalNumber 返回意外的 64 位整数值
我偶然发现了一个奇怪的 NSDecimalNumber 行为:对于某些值，调用 integerValue、longValue、longLongValue 等，返回意想不到的值(value)。示例: l
c++ - 正 lambda : '+[]{}' - What sorcery is this?
这个问题在这里已经有了答案: Resolving ambiguous overload on function pointer and std::function for a lambda using
regex - 匹配负/正 float/int 正则表达式 - 这是邪恶的吗？
我有这个正则表达式来测试用户输入是否有效: value.length === 0 || value === '-' || (!isNaN(parseFloat(value)) && /^-?\d+\.
matlab - 来自 matlab "fitgmdist"函数的不合理 [正] 对数似然值
我想用高斯混合模型拟合数据集，数据集包含大约 120k 个样本，每个样本有大约 130 个维度。当我使用 matlab 执行此操作时，我运行脚本(簇号为 1000): gm = fitgmdist(d

首页

博学

6Ren·AI

商城

javascript - 我正在制作一个图像 slider ，但只有第一张图像显示它不显示其余图像