CSS背景图像幻灯片 [英] CSS background-image slideshow
本文介绍了CSS背景图像幻灯片的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我对CSS和HTML很新,但我正在学习绳索。现在,我有一个背景图片在我的标题部分,我想把这变成幻灯片,3-4个图像随机播放一个计时器。
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.
看到一些教程通过HTML使用图像,但我设置它的方式是我有我的CSS属性background-image设置为我的图像。
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.
如果这不是感觉,这里是CSS
If this doesnt make sense, here is the CSS
.global-header {
min-height:600px;
background-image: url("Assets/BGImages/head_sandwichman.jpg");
background-size: cover;
text-align: center;
}
和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>
感谢您的帮助! / p>
Thanks for the help!
推荐答案
使用以下
<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>
这篇关于CSS背景图像幻灯片的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文