基本的には、CSS で設定した背景を 3 番目のスライドの終了後に新しいスライドで変更したいと考えています。つまり、次のようになります: 背景にテキストが上にある 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;
}