Html CSS 背景图片幻灯片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22292252/
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
CSS background-image slideshow
提问by user3342697
I am pretty new to CSS and HTML, but I am learning the ropes. Right now, I have a background image on my header section and I am trying to turn this into a slideshow with 3-4 images shuffling through on a timer.
我对 CSS 和 HTML 很陌生，但我正在学习绳索。现在，我的标题部分有一个背景图像，我试图将其转换为幻灯片，其中 3-4 个图像在计时器上随机播放。
I have seen some tutorials that use images through HTML, but the way I have set it up is I have my CSS property background-image set as my image.
我看过一些通过 HTML 使用图像的教程，但我设置它的方式是我将 CSS 属性 background-image 设置为我的图像。
If this doesnt make sense, here is the CSS
如果这没有意义，这里是 CSS
.global-header {
min-height:600px;
background-image: url("Assets/BGImages/head_sandwichman.jpg");
background-size: cover;
text-align: center;
}
and the HTML
和 HTML
<header class="container global-header">
<div class="inner-w">
<div class='rmm' data-menu-style = "minimal">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="menu.html">MENU</a></li>
<li><a href="findus.html">FIND US</a></li>
<li><a href="about.html">ABOUT</a></li>
</ul>
</div>
<div class="large-logo-wrap">
<img src="Assets/Logos/Giadaslogoindexwhitebig.png" />
</div>
</div>
Thanks for the help!
谢谢您的帮助！
回答by Pratik
Use following
使用以下
<script>
//Array of images which you want to show: Use path you want.
var images=new Array('Assets/BGImages/head_sandwichman1.jpg','Assets/BGImages/head_sandwichman2.jpg','Assets/BGImages/head_sandwichman3.jpg');
var nextimage=0;
doSlideshow();
function doSlideshow(){
if(nextimage>=images.length){nextimage=0;}
$('.global-header')
.css('background-image','url("'+images[nextimage++]+'")')
.fadeIn(500,function(){
setTimeout(doSlideshow,1000);
});
}
</script>
回答by bjb568
Made modifications to this answer.
对此答案进行了修改。
#graphic:before {
content: '';
position: absolute;
width: 400%;
height: 100%;
z-index: -1;
background: url(http://placekitten.com/500/500/) repeat; /* Image is 500px by 500px, but only 200px by 50px is showing. */
animation: slide 3s infinite;
}
@keyframes slide {
20% {
left: 0;
}
40%, 60% {
left: -50%;
}
80%, 100% {
left: -100%;
}
}
Bascially, just make your image into a sprite (combine them into 1 file), then use left:to cycle thru them. (Of course modify the left and percent values to your liking)
基本上，只需将您的图像制作成精灵（将它们组合成 1 个文件），然后使用left:它们来循环。（当然可以根据自己的喜好修改左值和百分比值）
回答by mhulse
Based on the accepted answer for this question, here's a jQuery-dependent version that creates a random image slideshow, uses CSS3 for the transition and gets the image paths via HTML5 dataattribute.
根据这个问题的公认答案，这里有一个依赖于 jQuery 的版本，它创建一个随机图像幻灯片，使用 CSS3 进行过渡并通过 HTML5data属性获取图像路径。
Demo:https://jsbin.com/luhawu/1
演示：https : //jsbin.com/luhawu/1
Note:All images should be same dimensions for best results.
注意：为了获得最佳效果，所有图像都应具有相同的尺寸。
JS:
JS：
(function($) {
'use strict';
var $slides = $('[data-slides]');
var images = $slides.data('slides');
var count = images.length;
var slideshow = function() {
$slides
.css('background-image', 'url("' + images[Math.floor(Math.random() * count)] + '")')
.show(0, function() {
setTimeout(slideshow, 5000);
});
};
slideshow();
}(jQuery));
Minified:
缩小：
!function(t){"use strict";var a=t("[data-slides]"),s=a.data("slides"),e=s.length,n=function(){a.css("background-image",'url("'+s[Math.floor(Math.random()*e)]+'")').show(0,function(){setTimeout(n,5e3)})};n()}(jQuery);
CSS:
CSS：
[data-slides] {
background-image: url(../../uploads/banner1.jpg); /* Default image. */
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
transition: background-image 1s linear;
}
/* Use additional CSS to control the `height` of `[data-slides]`, like so: */
.test { height: 220px; }
@media all and (min-width: 48em) {
.test { height: 320px; }
}
HTML
HTML
<div
class="test"
data-slides='[
"uploads/banner1.jpg",
"uploads/banner2.jpg",
"uploads/banner3.jpg",
"uploads/banner4.jpg",
"uploads/banner5.jpg",
"uploads/banner6.jpg",
"uploads/banner7.jpg",
"uploads/banner8.jpg",
"uploads/banner9.jpg"
]'
> … </div> <!-- /.primary -->
I've also put the code in a public Gist.
我还将代码放在公共 Gist 中。
回答by nativegrip
<html>
<head>
<style>
body {
background-image: url(1.png);
background-size: 99% 300px;
background-repeat: repeat-x;
animation: slideLeft 5s linear infinite;
background-position: 0% 100%;
}
@keyframes slideLeft {
to {
background-position: 9900% 100%;
}
}
@-moz-keyframes slideLeft {
to {
background-position: 9900% 100%;
}
}
@-webkit-keyframes slideLeft {
to {
background-position: 9900% 100%;
}
}
</style>
</head>
<body>
</body>
</html>
