<div class="key-visual">
	<ul>
		<li>
			<a href="#">
				<img src="images/key-visual-01.jpg" />
			</a>
		</li>
		<li>
			<a href="#">
				<img src="images/key-visual-02.jpg" />
			</a>
		</li>
		<li>
			<a href="#">
				<img src="images/key-visual-03.jpg" />
			</a>
		</li>
	</ul>
</div>

.key-visual {
	width: 940px;
	height: 220px;
}

.key-visual > ul {
	position: relative;
}

.key-visual > ul > li {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
}

.key-visual > ul > li:first-child {
	display: list-item;
}

jQuery(function(){
	var timeToFade = 1000;
	var timeToWait = 4000;
	var crossFade = function() {
		var list = jQuery('.key-visual > ul');
		var current = jQuery(list).children(':nth-child(1)');
		var next = jQuery(list).children(':nth-child(2)');
		jQuery(next).fadeIn(timeToFade);
		jQuery(current).fadeOut(timeToFade, function() {
			jQuery(this).remove();
			list.append(this);
		});
		setTimeout(crossFade, timeToWait);
	};
	setTimeout(crossFade, timeToWait);
});