Fatal编程技术网
  • javascript/
  • Javascript 引导转盘不显示图像

Javascript 引导转盘不显示图像

javascript twitter-bootstrap

Javascript 引导转盘不显示图像,javascript,twitter-bootstrap,carousel,Javascript,Twitter Bootstrap,Carousel,我正在尝试制作一个旋转木马，它可以浏览图像文件夹中的图像。脚本会根据显示的图像自动将项目添加到旋转木马中。图像标记为1、2、3等 但不管我怎么做，旋转木马都不会显示图像。我试着将图像转换成不同的格式。这些图像最初是JFIF 这是我的密码： <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" conten

我正在尝试制作一个旋转木马，它可以浏览图像文件夹中的图像。脚本会根据显示的图像自动将项目添加到旋转木马中。图像标记为1、2、3等

但不管我怎么做，旋转木马都不会显示图像。我试着将图像转换成不同的格式。这些图像最初是JFIF

这是我的密码：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <title>Edexcel International GCSE (9-1) Human Biology Student Book | Scotch's Pirated Book Reader (PBR) v3.6</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
    </head>
    <body onLoad="load()" style="margin-top: 10px;">
        <div class="container">
            <div style="text-align: center; line-height: 2px;">
                <h4>Image browser</h4>
                <p>Coded by someone</p>
            </div><br /><br />
            <div id="pageCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
                <div class="carousel-inner" role="listbox" id="carousel-inner">
                    <!-- GONNA BE FILLED BY THE SCRIPT -->
                </div>
                <a class="carousel-control-prev" href="#pageCarousel" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon bg-primary" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#pageCarousel" role="button" data-slide="next">
                    <span class="carousel-control-next-icon bg-primary" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>

        <script src="js/jquery-3.3.1.slim.min.js"></script>
        <script src="js/popper.min.js"></script>
        <script src="js/bootstrap.js"></script>
        <script src="js/new.js"></script>
    </body>
</html>


Edexcel国际GCSE（9-1）人类生物学学生用书| Scotch的盗版图书阅读器（PBR）v3.6
图像浏览器
由某人编码
新的.js文件包含将图像加载到旋转木马的脚本。它的基本功能总结如下：

'use strict';

function load()
{
    var index = 2; // The first image is named 2.jfif
    var carousel_innerHTML = "";

    while (index < 278) // There are 277 images
    {
        carousel_innerHTML = carousel_innerHTML + makeEntry(index);
        index++;
    }

    document.getElementById('carousel-inner').innerHTML = carousel_innerHTML;
}

function makeEntry(index)
{
    return '<!-- AUTO GENERATED CODE --> <div class="carousel-item"><img class="d-block mx-auto" src="assets/' + index + '.jfif" alt="' + index + '" /></div>\n';
}

“严格使用”；
函数加载（）
{
var index=2；//第一个映像名为2.jfif
var carousel_innerHTML=“”；
而（索引<278）//共有277幅图像
{
carousel_innerHTML=carousel_innerHTML+makeEntry（索引）；
索引++；
}
document.getElementById（'carousel-inner'）。innerHTML=carousel_innerHTML；
}
函数makeEntry（索引）
{
返回“\n”；
}
您遗漏了几件事：

  • 您需要在
    转盘内部
    div中的第一个div中添加一个
    active
    类
  • 加载完图像后，应初始化旋转木马<代码>$（'#pageCarousel'）。carousel（{interval:3000}）
    • 下面是一个工作示例

    “严格使用”；
//例如
变量图像=[“”，“”，“”https://upload.wikimedia.org/wikipedia/commons/c/c9/10150811_677994762257483_131131840_n_677994762257483.jpg", "https://upload.wikimedia.org/wikipedia/commons/1/1b/10603847_756710051052620_5858255939401577860_o_756710051052620.jpg","https://upload.wikimedia.org/wikipedia/commons/6/6a/1073115_556203904436570_702830415_o_556203904436570.jpg"]
函数加载（）{
var index=2；//第一个映像名为2.jfif
var carousel_innerHTML=“”；
而（索引<5）//共有277幅图像
{
carousel_innerHTML=carousel_innerHTML+makeEntry（索引）；
索引++；
}
document.getElementById（'carousel-inner'）。innerHTML=carousel_innerHTML；
$（'pageCarousel'）。carousel（{interval:3000}）；
}
函数makeEntry（索引）{
var first=索引===2？“活动”：“；
返回“\n”；
}
    
图像浏览器
由某人编码
    您是否尝试在浏览器中打开磁盘上的一个图像文件，以确保浏览器能够渲染图像？@JacobStamm我尝试了其他方法。我直接打开了网页，修改了源代码（在浏览器中），并为该图像添加了一个设置了src属性的标记。图像会显示，但不会显示在旋转木马中。控制台中没有错误吗？