実践演習-スライドショー

スライドショー - jQuery基本形

<h1>slideshow</h1>
<div class="slideshow">
<img src="imgs/ph01.jpg" alt="">
<img src="imgs/ph02.jpg" alt="" class="alt">
<img src="imgs/ph03.jpg" alt="" class="alt">
</div>
<div class="slideshow">
<img src="imgs/illust1.png" alt="">
<img src="imgs/illust2.png" alt="" class="alt">
<img src="imgs/illust3.png" alt="" class="alt">
</div>
<div class="slideshow">
<img src="imgs/art1.gif" alt="">
<img src="imgs/art2.gif" alt="" class="alt">
<img src="imgs/art3.gif" alt="" class="alt">
</div>

$(function(){
	var interval = 3000;
	$('.slideshow').each(function(){
		var container = $(this);
		function switchImg(){
			var imgs = container.find('img');
			var first = imgs.eq(0);
			var second = imgs.eq(1);
			first.fadeOut().appendTo(container);
			second.fadeIn();
		}
		setInterval(switchImg, interval);
	});
});