我想知道您是否可以指导我为我的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; 非常感谢。]
答案 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)
希望这有助于非常简单,只需将此代码添加到您想要的位置,然后如果想要图像相同大小只需更改图像大小,就可以找到下一个上一页的左右链接。阅读注释/注释以获取更多详细信息
<!-- 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;
答案 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和一个删除页面(目前正在编码(对于管理员用户)