我想制作幻灯片并使用多个脚本来实现这一目标。但它仍然无效。第一个幻灯片类正在显示,但其中的div是隐藏的。我只是不知道如何使它工作。这是我的代码:
HTML
<div class="row-fluid">
<div id="banner-wrapper" class="span12">
<div class="slideshow">
<div class="span8 offset2 slides">
<div class="span7">
<div class="persons">
</div>
</div>
<div class="span5 banner-text">
<h1>Help hulpmiddelen hergebruiken</h1>
<h2>Carista vind het fijn als ze weet dat hulpmiddelen niet
ongebruikt blijven. Daarom wil ze je helpen om een
hulpmiddel te vinden dat precies bij je past.</h2>
<div id="search-item-btn" class="btn-green">Waar ben jij naar op zoek?<span class="chevron-down"></span></div>
</div>
</div>
<div class="span8 offset2 slides">
<div class="span7">
<div class="persons">
</div>
</div>
<div class="span5 banner-text">
<h1>Help hulpmiddelen hergebruiken</h1>
<h2>Carista vind het fijn als ze weet dat hulpmiddelen niet
ongebruikt blijven. Daarom wil ze je helpen om een
hulpmiddel te vinden dat precies bij je past.</h2>
<div id="search-item-btn" class="btn-green">Waar ben jij naar op zoek?<span class="chevron-down"></span></div>
</div>
</div>
</div>
</div>
</div>
CSS
#banner-wrapper{
background-image:url(img/bg.jpg);
background-repeat:no-repeat;
background-size:cover;
}
#banner-wrapper .persons{
background-image:url(img/personen1.png);
background-repeat:no-repeat;
background-size:contain;
min-height: 710px;
width: 100%;
margin: 140px 0 -300px 0;
}
#banner-wrapper .banner-text{
margin: 180px 0 0 0;
}
.banner-text h1{
font-size:42px;
font-weight:800;
color:white;
text-transform:uppercase;
}
.banner-text h2{
font-size: 18px;
font-weight: 600;
color: white;
line-height: 30px;
}
.btn-green{
background-color:#cedd45;
color:#4b4b4b;
text-transform:uppercase;
padding:12px 17px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
float:left;
font-weight:700;
font-size:16px;
}
.chevron-down{
width:17px;
height:11px;
float:right;
margin:5px 0 0 15px;
background-image:url(img/chevron-down.png);
background-repeat:no-repeat;
background-size:contain;
}
的jQuery
$(function () {
$('.slides div').hide();
$(".slides").first().show();
setInterval(function () {
$('div.slides').not(':eq(0)').hide()
.next('.slides').fadeIn('slow')
.end().appendTo('.slideshow');
},5000);
});