如何将幻灯片合并到 HTML？

Question

我想知道您能否指导我为我的 HTML 文档制作幻灯片。我知道我需要 JavaScript，并且我已经知道如何制作幻灯片，但是我如何才能使幻灯片能够在我的 html 文档中查看？这是代码，我使用 Adobe Brackets 作为编辑器：

//////HTML 代码 ////////

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="main.css" type="text/css">
        <title>Quentrum</title>
    </head>
    <body>
        <div id="wrapper">
        <header>
              <nav>
                <ul>
                    <li>
                        <a href="index.html">
                        Quentrum
                        </a>
                    </li>
                    <li>
                         <a href="Store.html">
                        Store
                        </a>
                    </li>
                    <li>
                         <a href="Support.html">
                        Support
                        </a>
                    </li>

                </ul>
                </nav>
            </header>
            <section>
                <h>----------Slideshow Goes HERE-----------</h>
            </section>
            <footer>
             <p>Quentrum 2015</p>
            </footer>
        </div>
    </body>
</html>

//////// CSS 代码 /////////

body{
background-color:lightgray;
}
#wrapper{
width:inherit;
}
header{
background-color: white;
clear:both;
height: 50px;
border:solid 1px black;
border-radius: 5px;
width: inherit;
padding-right:195px;
padding-left:195px;
}

header ul {
list-style: none;
}
header ul li{
display: inline;
padding: 115px;
}
header a {
color: #777;
text-decoration: none;
font-family: Georgia;
font-size: 17px;
}
header a hover:{
color:black;
}
section{
clear: both;
height: 550px;
width: 100%;
border: solid 1px darkblue;
border-radius: 5px;
background: blue;
font-family: Georgia;
}
footer{
width: 100%;
border: solid 1px gray;
border-radius: 5px;
background: lightgray;
clear: both;
}
footer p {
font-family: Geogria;
margin-left: 30px;
}

提前致谢！！！

编辑[我认为我真的不需要粘贴任何 Javascript 代码，但如果您需要，请告诉我，我会把它贴上来。为此，当您回答时，您可以假装我的 javascript 文件的名称是 "example" 非常感谢。]

Answer 1

这可能不是您想要的方式，但是有一个内置的 Bootstrap 幻灯片放映选项。

它叫轮播，这里是link教程：http://www.w3schools.com/bootstrap/bootstrap_carousel.asp

Answer 2

您要找哪种幻灯片我目前正在使用 jquery 和 php

创建一个

可以在 http://rbgraphix.co.uk/gallery/display/New/slideshow.php

找到幻灯片预览

目前它不是自动的，但我正在以这种方式制作它并且还有一个上传页面/upload.php和一个删除页面（目前正在编码（对于管理员用户）

Answer 3

您可以通过 jQuery 完成。

        $(function () {

            $("#slideshow > div:gt(0)").hide();

            setInterval(function () {
                $('#slideshow > div:first')
                        .fadeOut(1000)
                        .next()
                        .fadeIn(1000)
                        .end()
                        .appendTo('#slideshow');
            }, 3000);

        });

示例：JSFiddle

Answer 4

希望这会有所帮助非常简单只需将此代码添加到您想要的位置，然后就没有指向下一个 n 上一个的左右链接如果想要相同大小的图像，只需更改图像大小，请阅读注释/评论以获取更多详细信息

<!-- Add below This To HEAD -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<!-- Add below  this to your style sheet -->
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }

<!-- Add Below this where you want it in your page -->
<div class="container">
  <br>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>

<!-- 
Add 
<li data-target="#myCarousel" data-slide-to="next number"></li>
to how many images you want or if you dont want any links to change images atall delete this up to indicators
-->     
      
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="firstimg.jpg" alt="Chania" width="460" height="345">
      </div>

      <div class="item">
        <img src="secondimg.jpg" alt="Chania" width="460" height="345">
      </div>
    
      <div class="item">
        <img src="thirdimage.jpg" alt="Flower" width="460" height="345">
      </div>

      <div class="item">
        <img src="fourthimage.jpg" alt="Flower" width="460" height="345">
        
<!-- Add for more images
<div class="item">
        <img src="nextimage.jpg" alt="..." width="460" height="345">
        
If want captions Add like so

<img src="filename.jpg" alt="alt">
      <div class="carousel-caption">
        <h3>Title</h3>
        <p>Caption</p>
      </div>
    </div>

        -->
       
      </div>
    </div>
  </div>
</div>

Answer 5

我已经为您解决了页脚和导航问题我相信只需下载这个新的 css 文件并将其替换为当前的 bootstrap.css

Link to Bootstrap CSS Click To Download 检查你的 css 因为我注意到它说的是 lightgray 而不是 lightgrey

也将此添加到您当前的 main.css

footer p {
font-family: Geogria;
margin-left:30px;
font-size:16px; /* Font Size You Want */
}

关于你的背景颜色，将其更改为浅灰色，完成这些步骤后应该可以正常工作

如何将幻灯片合并到 HTML？

How can I incorporate a slideshow into HTML?

html

javascript

css

slideshow

adobe-brackets