如何将幻灯片合并到HTML中?

时间:2015-06-16 18:51:32

标签: javascript html css slideshow adobe-brackets

我想知道您是否可以指导我为我的HTML文档制作幻灯片。我知道我需要JavaScript,而且我已经知道如何制作幻灯片,但是如何在我的html文档中制作幻灯片?这是代码,我使用Adobe Brackets作为编辑器:

////// HTML CODE ////////

@if (propiedadesFormularioDetalle != null) 
{ //} - remove this closing curly brace
    <div class="panel panel-default">
        <div class="panel-heading">Propiedades adicionales</div>
        <div class="panel-body">
            <dl class="dl-horizontal">
                @foreach (KeyValuePair<string, string> propiedad in propiedadesFormularioDetalle)
                {
                    <dt>
                        @Html.DisplayName(propiedad.Key)
                    </dt>
                    <dd>
                        @Html.DisplayFor(prop => propiedad.Value)
                    </dd>
                }
            </dl>
        </div>   
    //} - this needs to be moved to the bottom   
    </div>
}

//////// CSS CODE /////////

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

提前谢谢!!!

编辑[我不认为我真的需要粘贴任何Javascript代码,但是如果你需要它请告诉我,我会得到它。为了这个,当你回答时,你可以假装我的javascript文件的名称是&#34;例如&#34; 非常感谢。]

5 个答案:

答案 0 :(得分:1)

这可能不是您想要的方式,但是内置Bootstrap幻灯片选项。

它被称为轮播,这是教程的链接:http://www.w3schools.com/bootstrap/bootstrap_carousel.asp

答案 1 :(得分:1)

你可以通过jQuery来实现。

        $(function () {

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

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

        });

示例:JSFiddle

答案 2 :(得分:1)

希望这有助于非常简单,只需将此代码添加到您想要的位置,然后如果想要图像相同大小只需更改图像大小,就可以找到下一个上一页的左右链接。阅读注释/注释以获取更多详细信息

&#13;
&#13;
<!-- 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>
&#13;
&#13;
&#13;

答案 3 :(得分:1)

我已经为您解决了页脚和导航问题我相信只需下载这个新的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 */
}

关于你的背景颜色将它改为lightgrey,一旦完成这些步骤就应该可以正常工作

答案 4 :(得分:0)

您正在寻找什么样的幻灯片?我目前正在使用jquery和php创建一个

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

找到幻灯片的预览

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