如何在HTML＆amp;中制作图像幻灯片CSS？

Question

我是网络开发的新手，我不了解网上提供的关于slideshow的文章。请告诉我如何制作类似Source

的内容

Answer 1

您可以使用bootstrap carousel模板轻松... http://getbootstrap.com/javascript/#carousel浏览页面

这是自定义代码

这应该可以正常工作

      <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 -->

/ ******造型轮播******** /

/ ** Carousel Fade ** /

            .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%;
        }

只需包含引导程序框架即可。

Answer 2

为了包含您所呈现的幻灯片，您需要使用某种JavaScript包。要使用此功能，您需要在HTML中包含该脚本。有关如何包含此脚本的最佳说明，请参阅您提供的链接中的JavaScript文档：

http://www.jssor.com/development/index.html

请点击此链接，这将告诉您如何使用这些文件。接下来，您需要下载软件包并将软件包内容移动到您的文件夹中。这是下载链接：

http://www.jssor.com/download-jssor-slider-development-kit.html

或者，如果您更喜欢使用严格的CSS幻灯片包，请参阅以下链接中的文档：cssslider dot com

如果您对HTML和CSS不熟悉，我建议您观看一些YouTube教程来收集基础知识或访问HTML的w3教程以收集基础知识。希望这有帮助！