Question

我不知道为什么这段代码不起作用...因为我是初学者，我找不到这个错误，提前感谢任何帮助我的人

 <!DOCTYPE html>
    <html>
    <head>
       <title>Jothidhal</title>
       <meta charset = "utf-8">
       <meta name = "viewport" content = "width = device-width" ,  initial-scale = 1>
       <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css">
       <link rel = "stylesheet" type = "text/css" href = "additional.css">
      <link href="https://fonts.googleapis.com/css?family=Arsenal:700" rel="stylesheet">
    </head>
    <body>
       <div class = "container-fluid">
         <div id = "My_Carousel" class = "carousel-slide" data-ride = "carousel">
           <ol class = "carousel-indicators">
           <li data-target = "#My_Carousel" data-slide-to = "0" class = "active"> </li>
           <li data-target = "#My_Carousel" data-slide-to = "1" > </li>
           <li data-target = "#My_Carousel" data-slide-to = "2" > </li>
           </ol>
           <div class = "carousel-inner" role ="listbox">
             <div class = "item"><img src = "images/images 1.jpg" alt = "Durairaj" width = "100%" height = "400px"</div>
             <div class = "item"><img src = "images/images 2.jpg" alt = "Durairaj" width = "100%" height = "400px"</div>
             <div class = "item"><img src = "images/images 3.jpg" alt = "Durairaj" width = "100%" height = "400px"</div>
             <div class = "item"><img src = "images/images 4.jpg" alt = "Durairaj" width = "100%" height = "400px"</div>
             <div class = "item"><img src = "images/images 5.jpg" alt = "Durairaj" width = "100%" height = "400px"</div>
             <div class = "item"><img src = "images/images 6.jpg" alt = "Durairaj" width = "100%" height = "400px"</div>
           </div>
           <a class = "left-carousel-control" href = "#My_Carousel" role= "button" data-slide = "prev">
           <span class = "glyphicon glyphicon-chevron-left"></span>
           <span class = "sr-only">Previous</span>
           </a> 
         </div>
       </div>
       <script type = "text/javascript" src = "js/bootstrap.min.js"></script>
       <script type = "text/javascript" src = "js/jquery.js"></script>
    </body>
    </html>

Answer 1

你的副本＆amp;糊。这应该是你的HTML：

将carousel-slide更改为carousel slide
将active课程添加到您的第一张幻灯片
使用正确的Carousel控件而不是错误的控件。控件的类应为left carousel-control而不是left-carousel-control
关闭img代码

如果你有3个指标，你应该只有3个幻灯片

<div class="container-fluid">
    <div id="My_Carousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#My_Carousel" data-slide-to="0" class="active"> </li>
            <li data-target="#My_Carousel" data-slide-to="1" > </li>
            <li data-target="#My_Carousel" data-slide-to="2" > </li>
        </ol>

        <div class = "carousel-inner" role ="listbox">
            <div class = "item active"><img src = "images/images 1.jpg" alt = "Durairaj" /></div>
            <div class = "item"><img src = "images/images 2.jpg" alt = "Durairaj" /></div>
            <div class = "item"><img src = "images/images 3.jpg" alt = "Durairaj" /></div>
        </div>
        <a class="left carousel-control" href="#My_Carousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#My_Carousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

选中此W3Schools tut并查看此fiddle

如果您复制粘贴代码，至少要正确执行..

Answer 2

您的img代码未关闭！

<div class = "item"><img src = "images/images 6.jpg" alt = "Durairaj" width = "100%" height = "400px"</div>

应该是

<div class = "item"><img src = "images/images 6.jpg" alt = "Durairaj" width = "100%" height = "400px"></div>

HTML中的轮播无法正常工作

2 个答案: