简单的幻灯片只使用 css 和 html
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20525710/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simple slideshow use only css and html
提问by JK9
Is it possible to develop a simple slideshow using only CSS and HTML? If so, can anyone guide me? Is jquery a must for slideshow development bacause the result of google search almost using along with jquery.
是否可以仅使用 CSS 和 HTML 开发一个简单的幻灯片？如果是这样，有人可以指导我吗？jquery 是幻灯片开发的必需品，因为 google 搜索的结果几乎与 jquery 一起使用。
回答by jamie
Here's a good exampleof how to achieve just this - written by Smashing Magazine
这是如何实现这一目标的一个很好的例子- 由 Smashing Magazine 撰写
回答by santosh
Yes you can make simple CSS-HTML slideshow. If you want to use images simply replace h1 tags with img.
是的，您可以制作简单的 CSS-HTML 幻灯片。如果您想使用图像，只需将 h1 标签替换为 img。
Working JsFiddle: https://jsfiddle.net/usm10hfy/
工作 JsFiddle：https://jsfiddle.net/usm10hfy/
Here is the simple code:
这是简单的代码：
<div id="slideshow">
<div class="slide-wrapper">
<div class="slide"><h1 class="slide-number">1</h1></div>
<div class="slide"><h1 class="slide-number">2</h1></div>
<div class="slide"><h1 class="slide-number">3</h1></div>
<div class="slide"><h1 class="slide-number">4</h1></div>
<div class="slide"><h1 class="slide-number">5</h1></div>
<div class="slide"><h1 class="slide-number">6</h1></div>
</div>
</div>
<style>
body {
font-family: Helvetica, sans-serif;
padding: 5%;
text-align: center;
}
#slideshow {
overflow: hidden;
height: 510px;
width: 728px;
margin: 0 auto;
}
.slide-wrapper {
width: 2912px;
-webkit-animation: slide 10s ease infinite;
}
.slide {
float: left;
height: 510px;
width: 728px;
}
.slide:nth-child(1) {
background: #D93B65;
}
.slide:nth-child(2) {
background: #037E8C;
}
.slide:nth-child(3) {
background: #36BF66;
}
.slide:nth-child(4) {
background: #D9D055;
}
.slide:nth-child(5) {
background: #D9D055;
}
.slide:nth-child(6) {
background: #D9D055;
}
.slide-number {
color: #000;
text-align: center;
font-size: 10em;
}
@-webkit-keyframes slide {
20% {margin-left: 0px;}
30% {margin-left: -728px;}
50% {margin-left: -728px;}
60% {margin-left: -1456px;}
70% {margin-left: -1456px;}
80% {margin-left: -2184px;}
90% {margin-left: -2184px;}
}
</style>
Answer by http://www.joblesspanda.com/
回答by michael
For an html only slideshow use the "http-equiv refresh" meta tag. Simple avoids jscript and functional. One possible downside, may affect some browsers back button?
对于仅 html 的幻灯片，请使用“http-equiv refresh”元标记。Simple 避免了 jscript 和函数式。一个可能的缺点，可能会影响某些浏览器的后退按钮？
