slide show

→→→画像ファイル→→.ZIP DL

slideshow

htmlソース

ｃｓｓソース

 .slideshow{
	width:300px;
	height:300px;
	margin:0 20px 20px 0;
	float:left;
	position:relative;
}
/* img要素は絶対配置で一か所に重ねる */
.slideshow img{
	position:absolute;
	top:0;
	left:0;
	border:1px solid #000;
}
/* 2番目以降のimg要素にclass="alt"を付け、消す */
.slideshow img.alt{
	display:none;
}                       
                        

jsソース

    //タイマー用の初期値を設定                    
	var interval = 3000;
	$('.slideshow1').each(function(){
		var container = $(this);
        //ユーザー定義関数　
		function switchImg(){
			var imgs = container.find('img');
			//eqメソッド使用　０番目の要素を絞り込み
            var first = imgs.eq(0);
            //１番目の要素を絞り込み
			var second = imgs.eq(1);
            //０番目の要素をフェードアウトさせて表示領域の一番最後に移動
			first.fadeOut().appendTo(container);
            //1番目の要素をフェードイン
			second.fadeIn();
		}
        //setIntervalメソッド使用3秒ごとにswitchImg関数を実行
		setInterval(switchImg, interval);
	});

                        
                        

発展系２

htmlコード

cssコード

/*a要素に対してのスタイルに変更しています。*/
.slideshow{
	width:300px;
	height:300px;
	margin:0 20px 20px 0;
	float:left;
	position:relative;
}
/* a要素は絶対配置で一か所に重ねる */
.slideshow a{
	position:absolute;
	top:0;
	left:0;
}
	.slideshow a img{
		border:1px solid #000;
		vertical-align:top;
	}
/* 2番目以降のimg要素にclass="alt"を付け、消す */
.slideshow a.alt{
	display:none;
}                        
                        

jsコード

	var interval = 3000;
	$('.slideshow').each(function(){
    	//タイマー格納用の変数　timerを定義
		var timer;
		var container = $(this);
		function switchImg(){
			var anchors = container.find('a');
			var first = anchors.eq(0);
			var second = anchors.eq(1);
			first.fadeOut().appendTo(container);
			second.fadeIn();
		}
        //ユーザー定義関数startTimer
		function startTimer(){
        	//setIntervalメソッドをtimer変数に代入
			timer = setInterval(switchImg, interval);
		}
        //ユーザー定義関数　stopTimer
		function stopTimer(){
        	//clearIntervalメソッド使用してsetIntervalを停止させる
			clearInterval(timer);
		}
        //hoverイベントでタイマーのストップスタートを制御
		container.find('a').hover(stopTimer,startTimer);
		//ページロード時はタイマーをスタートさせる
		startTimer();
	});