我是CSS和
HTML的新手,但我正在学习绳索.现在,我的标题部分有一个背景图像,我试图把它变成幻灯片,在计时器上拖着3-4张图像.
我已经看过一些通过HTML使用图像的教程,但我设置它的方式是我将CSS属性background-image设置为我的图像.
如果这没有意义,那么这就是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>
谢谢您的帮助！
解决方法
使用以下
<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>
