Result
jQurey
//id="slideshow"内のdiv要素の最初以外は隠す
$("#slideshow > div:gt(0)").hide();
//タイマーで順にフェードアウトとインを繰り返す
setInterval(function() {
$('#slideshow > div:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
}, 3000);
css
#slideshow {
margin: 50px auto;
position: relative;
width: 100px;
height: 100px;
padding: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
#slideshow > div {
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
}
html
<div id="slideshow">
<div>
<img src="red.jpg">
</div>
<div>
<img src="yellow.jpg">
</div>
<div>
text text text text text text text text text text text text
</div>
<div>
<img src="black.jpg">
</div>
</div>
via
Simplest jQuery Slideshow – Snook.ca
[myphp file=’jquery-other-snippets’]
