如何在HTML中制作图像幻灯片&；CSS？

我是网络开发新手，我不理解网络上提供的关于

幻灯片放映的文章。请让我知道我该怎么做这样的东西

您可以使用引导转盘模板，这很容易。。。浏览这一页

这是一个自定义代码

这应该行得通

      <div class="carousel fade" data-ride="carousel" id="featured">

        <ol class="carousel-indicators">
        </ol>

           <div class="carousel-inner fullheight">
                <div class="item"><img src="images/carousel-lifestyle.jpg" alt="Lifestyle Photo"></div>
                <div class="item"><img src="images/carousel-mission.jpg" alt="Mission"></div>
                <div class="item"><img src="images/carousel-vaccinations.jpg" alt="Vaccinations"></div>
                <div class="item"><img src="images/carousel-fish.jpg" alt="Fish"></div>
                <div class="item"><img src="images/carousel-exoticanimals.jpg" alt="Exotic Animals"></div>      
          </div><!-- carousel-inner -->

       <a class="left carousel-control" href="#featured" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#featured" role="button" data-slide="next">
         <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div><!-- featured carousel -->

只需包含引导框架就可以了。
为了包含像您所展示的幻灯片，您需要使用某种JavaScript包。为了使用它，您需要在HTML中包含脚本。有关如何包含此脚本的最佳解释，请参阅您提供的链接中的JavaScript文档：


按照此链接，这将向您展示如何使用这些文件。接下来，您需要下载包并将包内容移动到您的文件夹中。以下是下载链接：


或者，如果您希望使用严格的CSS幻灯片软件包，请参考以下链接中的文档：cssslider.com

如果您对HTML和CSS非常陌生，我建议您观看一些YouTube教程来收集基础知识，或者访问w3 HTML教程来收集基础知识。希望这有帮助
 下载并集成到您的website@Virus请仔细阅读并尝试一下。仅仅用HTML和CSS制作这样的滑块是非常困难的。你也需要JavaScript。但是，如果你是网页设计和开发的新手，你可以搜索预先构建的易于集成和免费的解决方案。它们有很多，它们有很好的文档和社区供您帮助。@ris我不能下载它作为一个demo@JanakaDombawela先生，你可以发布一些链接吗
            .carousel.fade {
                 opacity: 1;
               }

       .carousel.fade .item {
        transition: opacity ease-out .7s;
        left: 0;
        opacity: 0;
        top: 0;
        position: absolute;
        width: 100%;
        display: block;
        }

        .carousel.fade .item:first-child {
        top: auto;
        opacity: 0;
        position: relative;
        }

        .carousel.fade .item.active {
        opacity: 1;
        }

        .carousel-control {
        opacity: 0;
        }

       .carousel-control.right,
       .carousel-control.left {
        background-image: none;
        }

       #featured .item {
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center center;
       width: 100%;
       height: 100%;
        }