基本上我想在第3张幻灯片结束后用随后的新幻灯片更改我用CSS设置的背景。所以它就像:3张带背景的幻灯片,上面有文字,然后是包含图片的新幻灯片。我很抱歉距离最终结果太远,但我已经搜索过,但却找不到那样的例子。
JS:
<script type="text/javascript" language="javascript">
$(function() {
$('#carousel').carouFredSel({
items: 1,
scroll: {
duration: 500,
timeoutDuration: 500,
easing: 'elastic'
}
});
});
</script>
HTML:
<div id="wrapper">
<div style="background-image: url(artist_carole.jpg);">
<div id="carousel">
<div>
<h3>Cupcake ipsum</h3>
</div>
<div>
<h3>Sesame snaps</h3>
</div>
<div>
<h3>Apple pie jelly</h3>
</div>
</div>
<div id="foo3">
<div><img src="files/artists/thumb_lettering_rania.jpg" /></div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
CSS包括:
#wrapper {
background-color: #F4F0EE;
border: 1px solid #ccd;
width: 950px;
height: 325px;
padding-top: 25px;
margin:10px 0 0 10px;
overflow: hidden;
border-radius: 10px;
}
#carousel > div {
width: 400px;
padding: 0 100px;
height: 225px;
float: left;
overflow: hidden;
}
#carousel h3 {
font-size: 30px;
line-height: 30px;
margin: 20px 0 20px 0;
}