Result
http://jsfiddle.net/kachibito/dvgxx/embedded/result,js,css,html
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>